ЯсноПонятно24

import React, { useReducer, useState } from 'react';

const todoReducer = (todos, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...todos, action.payload];
    case 'DELETE_TODO':
      return todos.filter(todo => todo.id !== action.payload);
    default:
      return todos;
  }
};

const App = () => {
  const [todos, dispatch] = useReducer(todoReducer, []);
  const [inputValue, setInputValue] = useState('');

  const handleAddTodo = () => {
    const newTodo = {
      id: Date.now(),
      text: inputValue
    };
    dispatch({ type: 'ADD_TODO', payload: newTodo });
    setInputValue('');
  };

  const handleDeleteTodo = (id) => {
    dispatch({ type: 'DELETE_TODO', payload: id });
  };

  return (
    <div>
      <h1>Todo App</h1>
      <TodoInput
        inputValue={inputValue}
        setInputValue={setInputValue}
        handleAddTodo={handleAddTodo}
      />
      <TodoList todos={todos} handleDeleteTodo={handleDeleteTodo} />
    </div>
  );
};

const TodoInput = ({ inputValue, setInputValue, handleAddTodo }) => {
  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
};

const TodoList = ({ todos, handleDeleteTodo }) => {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} handleDeleteTodo={handleDeleteTodo} />
      ))}
    </ul>
  );
};

const TodoItem = ({ todo, handleDeleteTodo }) => {
  return (
    <li>
      {todo.text}
      <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
    </li>
  );
};

export default App;