editableTodo.js

import { useState } from "react";

export default function EditableTodo() {
  const [todos, setTodos] = useState([
    { id: 1, title: "Learn React", editing: false },
    { id: 2, title: "Practice JS", editing: false },
  ]);

  const updateTodo = (id, value) => {
    setTodos((prev) =>
      prev.map((todo) =>
        todo.id === id ? { ...todo, title: value } : todo
      )
    );
  };

  const toggleEdit = (id) => {
    setTodos((prev) =>
      prev.map((todo) =>
        todo.id === id ? { ...todo, editing: !todo.editing } : todo
      )
    );
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.editing ? (
            <input
              value={todo.title}
              onChange={(e) => updateTodo(todo.id, e.target.value)}
            />
          ) : (
            <span>{todo.title}</span>
          )}

          <button onClick={() => toggleEdit(todo.id)}>
            {todo.editing ? "Save" : "Edit"}
          </button>
        </li>
      ))}
    </ul>
  );
}