Map Component

map-component.js

const completedStyle = { color: 'green' }
const uncompletedStyle = { color: 'red' }

const Item = ({ title, completed }) => (
  <li>
    <span>{completed ? 'o' : 'x'} </span>
    <span style={completed ? completedStyle : uncompletedStyle}>{title}</span>
  </li>
)

const TodoList = () => (
  <ul>
    {todoList.map((item, key) => (
      <Item key={key} {...item} />
    ))}
  </ul>
)