React HOC Map

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app"></div>
    <script src="script.js"></script>
  </body>

</html>


const withKeyFromProps = (Comp, propName) => (props) => <Comp key={props[propName]} {...props}/>

const TodoItem = (todo) => (
            <li>
              <input type='checkbox' defaultChecked={todo.isComplete} />
              {todo.name}
            </li>
            )

const TodoDisplay = withKeyFromProps(TodoItem, 'id')

class App extends React.Component {
  render() {
    return (
      <div>
        <ul>
          {this.props.todos.map(TodoDisplay)}
        </ul>
      </div>
    )
  }
}

const todos = [
  {id: 1, name: 'Create the initial state', isComplete: true},
  {id: 2, name: 'Map over data', isComplete: true},
  {id: 3, name: 'Refactor', isComplete: true},
  {id: 4, name: 'Use HOC to remove warning', isComplete: false},
  ]
  
ReactDOM.render(<App todos={todos} />, document.getElementById('app'))

/* Styles go here */