Simple todo app using ReactJS and Recoil
First, you'll need to install the Recoil package:
npm install recoil
Next, create a new file called TodoItem.js with the following code:
import React from 'react';
import { useRecoilState } from 'recoil';
import { todoListState } from './TodoList';
function TodoItem({ item }) {
const [todoList, setTodoList] = useRecoilState(todoListState);
const deleteItem = () => {
const newList = todoList.filter((todo) => todo.id !== item.id);
setTodoList(newList);
};
return (
<div>
<input type="checkbox" checked={item.isComplete} />
<span>{item.text}</span>
<button onClick={deleteItem}>Delete</button>
</div>
);
}
export default TodoItem;
This code defines a new component called TodoItem that takes in a item prop representing a single item in the todo list. The component renders a checkbox, the text of the todo item, and a delete button. When the delete button is clicked, the item is removed from the todo list.
Next, create a new file called TodoList.js with the following code:
import React from 'react';
import { useRecoilValue } from 'recoil';
import { todoListState } from './TodoList';
import TodoItem from './TodoItem';
function TodoList() {
const todoList = useRecoilValue(todoListState);
return (
<div>
{todoList.map((todoItem) => (
<TodoItem key={todoItem.id} item={todoItem} />
))}
</div>
);
}
export const todoListState = atom({
key: 'todoListState',
default: [],
});
export default TodoList;
This code defines a new component called TodoList that renders a list of todo items using the TodoItem component. It also defines a todoListState atom using Recoil, which is an array of todo items. This atom is used to store and update the todo list.
Finally, create a new file called App.js with the following code:
import React from 'react';
import { RecoilRoot } from 'recoil';
import TodoList, { todoListState } from './TodoList';
function App() {
return (
<RecoilRoot>
<TodoList />
</RecoilRoot>
);
}
export default App;
This code sets up the Recoil state management system using the RecoilRoot component and renders the TodoList component.
That's it! You should now have a working todo app with ReactJS and Recoil. You can add new todo items by modifying the todoListState atom, which will trigger a re-render of the TodoList component.
Happy Learning!! Happy Coding!!
Comments