[0328] TIL > React >> Recoil > Atoms

Atoms > make todo list in an array of objects

each object represents one todo list

example 1)

1. We'll call our list atom :
   todoListState
   and create it using the
   atom() function:

const todoListState = atom({
  key: 'TodoList',
  default: [],
});

========

2. We give our atom a unique key and set the default value to an empty array. To read the contents of this atom, we can use the useRecoilValue() hook in our TodoList component:

function TodoList() {
  const todoList = useRecoilValue(todoListState);

  return (
    <>
      {/* <TodoListStats /> */}
      {/* <TodoListFilters /> */}
      <TodoItemCreator />

      {todoList.map((todoItem) => (
        <TodoItem key={todoItem.id} item={todoItem} />
      ))}
    </>
  );
}