TodoWithReact.jsx

function Todo({todo, onToggle}) {
  return (
    <li>
      <input
        type="checkbox"
        onClick={onToggle}
        checked={todo.done}
      />
      {todo.done ?
        <span style={{textDecoration: 'line-through'}}>{todo.title}</span> :
        todo.title}
    </li>
  );
}

class TodoApplication extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        {title: 'Write a TODO app without React', done: true},
        {title: 'Write the rest of the article', done: false},
      ],
    };
  }
  
  render() {
    return (
      <ul>
        {this.state.todos.map((todo, key) => (
          <Todo
            todo={todo}
            key={key}
            onToggle={() => this.setState({
              todos: this.state.todos.map((t, i) => i === key ? {...t, done: !t.done} : t)
            })}
          />
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<TodoApplication />, document.getElementById('app'));