starter.jsx

import React, { Component } from "react";
import "./index.css";
import todosList from "./todos.json";

class App extends Component {
  state = {
    todos: todosList
  };

  handleCreateTodo = event => {
    const newTodo = {
      userId: 1,
      id: Math.ceil(Math.random() * 1000000),
      title: this.state.value,
      completed: false
    };
  };
  handleDeleteTodo = id => event => {
    // programming concept: closure
  };

  render() {
    return (
      <section className="todoapp">
        <header className="header">
          <h1>todos</h1>
          <input
            className="new-todo"
            placeholder="What needs to be done?"
            autofocus
          />
        </header>
        <TodoList
          todos={this.state.todos}
          handleDeleteTodo={this.handleDeleteTodo}
        />
        <footer className="footer">
          <span className="todo-count">
            <strong>0</strong> item(s) left
          </span>
          <button className="clear-completed">Clear completed</button>
        </footer>
      </section>
    );
  }
}

class TodoItem extends Component {
  render() {
    // this.props.handleDeleteTodo
    return (
      <li className={this.props.completed ? "completed" : ""}>
        <div className="view">
          <input
            className="toggle"
            type="checkbox"
            checked={this.props.completed}
          />
          <label>{this.props.title}</label>
          <button className="destroy" onClick={this.props.handleDeleteTodo} />
        </div>
      </li>
    );
  }
}

class TodoList extends Component {
  render() {
    // this.props.handleDeleteTodo
    return (
      <section className="main">
        <ul className="todo-list">
          {this.props.todos.map(todo => (
            <TodoItem
              title={todo.title}
              completed={todo.completed}
              handleDeleteTodo={this.props.handleDeleteTodo(todo.id)}
            />
          ))}
        </ul>
      </section>
    );
  }
}

export default App;