todoList2

index.js

import React, { Component } from "react";
import ReactDom from "react-dom";

const doneStyles = {
  textDecoration: "line-through",
  color: "grey"
};

const buttonStyles = {
  border: "none",
  padding: 0,
  marginLeft: 10
};

const Todo = props => {
  const styles = props.done ? doneStyles : {};

  return (
    <li>
      <input
        type="checkbox"
        name={props.label}
        id={props.label}
        checked={props.done}
        onChange={props.onChange}
      />
      <label style={styles} htmlFor={props.label}>
        {props.label}
      </label>
      <button style={buttonStyles} onClick={props.onRemove}>
        <span role="img" aria-label="delete">
          ❌
        </span>
      </button>
    </li>
  );
};

class TodoList extends Component {
  state = {
    inputValue: "",
    todos: [
      { label: "homework", done: true },
      { label: "call my mother", done: false },
      { label: "cook", done: true }
    ]
  };

  handleChange = event => {
    this.setState({
      inputValue: event.target.value
    });
  };

  handleTodo = index => {
    this.setState(previousState => {
      const newTodoState = [...previousState.todos];
      newTodoState[index].done = !newTodoState[index].done;

      return {
        todos: newTodoState
      };
    });
  };

  removeTodo = index => {
    this.setState(previousState => {
      const newTodoState = [...previousState.todos];
      newTodoState.splice(index, 1);

      return {
        todos: newTodoState
      };
    });
  };

  addTodo = () => {
    this.setState(previousState => {
      if (!previousState.inputValue) {
        return {};
      }

      return {
        inputValue: "",
        todos: previousState.todos.concat({
          label: previousState.inputValue,
          done: false
        })
      };
    });
  };

  render() {
    const totalTodos = this.state.todos.length;
    const doneTodos = this.state.todos.filter(todo => todo.done).length;
    const percentDone = Math.round((doneTodos / totalTodos) * 100);

    return (
      <div>
        <input
          type="text"
          placeholder="Some reminder"
          value={this.state.inputValue}
          onChange={this.handleChange}
        />
        <button onClick={this.addTodo}>Add Todo</button>
        <p>Today I needs to remember to... {this.state.inputValue}</p>
        <ul>
          {this.state.todos.map((todo, index) => {
            return (
              <Todo
                key={todo.label}
                label={todo.label}
                done={todo.done}
                onChange={() => this.handleTodo(index)}
                onRemove={this.removeTodo.bind(index)}
              />
            );
          })}
        </ul>
        done {doneTodos} / {totalTodos} ({percentDone}%)
      </div>
    );
  }
}

ReactDom.render(<TodoList />, document.getElementById("root"));