App.jsx

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("");

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

export default App;