App.js

import React from "react";
import { useRecoilValue } from "recoil";
import { filteredTodoListState } from "./state/selectors";
import { TodoListFilters } from "./components/TodoListFilters";
import { TodoItemCreator } from "./components/TodoItemCreator";
import { TodoItem } from "./components/TodoItem";

function App() {
  const filteredTodos = useRecoilValue(filteredTodoListState);
  return (
    <>
      <TodoListFilters />
      <TodoItemCreator />
      {filteredTodos.map((item, index) => (
        <TodoItem item={item} index={index} />
      ))}
    </>
  );
}
export default App;