Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
};
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={() => deleteItemAt(index)}>Delete</button>
</li>
))}
</>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.