AppReducer1.jsx

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const Header = ({ children, count }) => (
  <h1>
    {children} ({count})
  </h1>
);

const Input = ({ onAdd }) => {
  const [todo, setTodo] = useState("");

  const handleChange = evt => {
    setTodo(evt.target.value);
  };

  const handleAdd = () => {
    onAdd(todo);
    setTodo("");
  };

  return (
    <div>
      <input type="text" name="todo" value={todo} onChange={handleChange} />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
};

const Todo = ({ id, name, onDelete }) => (
  <div>
    {name}
    <button onClick={() => onDelete(id)}>done</button>
  </div>
);

const TodoList = ({ name, todos, onAdd, onDelete }) => (
  <div className="todolist">
    <Header count={todos.length}>{name}</Header>
    <Input onAdd={onAdd} />
    {todos.map(todo => (
      <Todo key={todo.id} name={todo.name} id={todo.id} onDelete={onDelete} />
    ))}
  </div>
);

const TodoListContainer = ({ name }) => {
  const [todos, setTodos] = useState([
    { id: 1, name: "milk" },
    { id: 2, name: "beer" }
  ]);

  const handleAdd = todo => {
    const newTodo = { id: todos.length + 1, name: todo };
    setTodos([...todos, newTodo]);
  };

  const handleDelete = todoId => {
    setTodos(todos.filter(el => el.id !== todoId));
  };

  return (
    <TodoList
      name={name}
      todos={todos}
      onAdd={handleAdd}
      onDelete={handleDelete}
    />
  );
};

const App = () => <TodoListContainer name="Things to buy" />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);