App.js

import React, { useState } from "react";
import { useRecoilState, atom } from "recoil";

const todoListState = atom({
  key: "todoListState",
  default: ["Apples", "Eggs", "Butter"],
});

function App() {
  const [todoList, setTodoList] = useRecoilState(todoListState);
  const [todo, setTodo] = useState("");

  const deleteItemAt = (index) => {
    const todos = [...todoList];
    todos.splice(index, 1);
    setTodoList(todos);
  };
  const editItemAt = (index) => {
    const todos = [...todoList];
    var item = prompt("Change item name", todoList[index]);
    todos[index] = item;
    setTodoList(todos);
  };

  return (
    <>
      <input value={todo} onChange={(e) => setTodo(e.target.value)} />
      <button onClick={() => setTodoList((todos) => [...todos, todo])}>
        Add
      </button>
      {todoList.map((item, index) => (
        <li key={item}>
          {item} 
          <button onClick={() => editItemAt(index)}>Edit</button>
          <button onClick={() => deleteItemAt(index)}>Delete</button>
        </li>
      ))}
    </>
  );
}

export default App;