Как реализовать кнопку редактировать?

Question

Делаю обычную тудушку на реакте + ts и мне нужно реализовать кнопку "Edit". Пользователь ввел свою таску и напротив есть две кнопки (редактировать и удалить).Кнопку удаления реализовал а вот с editom не получается. При нажатии на едит пользователь может изменить таску и сохранить.Как это верно реализовать? Пробовал писать функцию которая меняет стейт но не вышло

Мой код:

export default function App() {
  const [value, setValue] = React.useState<string>("");
  const [todos, setTodos] = React.useState<Itodo[]>([]);
 

  const handleEvent: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setValue(e.target.value);
  };
  const handlePress: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
    if (e.key === "Enter") {
      addTodo();
    }
  };

  const addTodo = () => {
    setTodos([
      ...todos,
      {
        id: Date.now(),
        complete: false,
        title: value,
      },
    ]);
    setValue("");
  };

  const removeTodo = (id: number): void => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };
  const toggleTodo = (id: number): void => {
    setTodos(
      todos.map((todo) => {
        if (todo.id !== id) return todo;
        return {
          ...todo,
          complete: !todo.complete,
        };
      })
    );
  };


  return (
    <div>
      <div>
        <input
          placeholder="Enter your business"
          value={value}
          onChange={handleEvent}
          onKeyPress={handlePress}
          ref={inputRef}
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <TodoList items={todos} removeTodo={removeTodo} toggleTodo={toggleTodo} />
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

Как реализовать кнопку редактировать?

Ответы (0 шт):