Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import { useRecoilState } from "recoil";
import { todoListState } from "../state/atoms";
export function TodoItem({ item, index }) {
const [todoList, setTodoList] = useRecoilState(todoListState);
const deleteItemAt = (index) => {
const todos = [...todoList];
todos.splice(index, 1);
setTodoList(todos);
};
const editItemAt = (index) => {
const todos = [...todoList];
const todo = todoList[index];
var name = prompt("Change item name", todo.name);
todos[index] = { ...todo, name: name };
setTodoList(todos);
};
const completeAt = (index) => {
const todos = [...todoList];
const todo = todos[index];
todos[index] = { name: todo.name, isCompleted: !todo.isCompleted };
setTodoList(todos);
};
return (
<li key={item.name}>
<span
onClick={() => completeAt(index)}
style={{
textDecoration: item.isCompleted ? "line-through" : "initial",
}}
>
{item.name}
</span>
<button onClick={() => deleteItemAt(index)}>Delete</button>
<button onClick={() => editItemAt(index)}>Edit</button>
</li>
);
}
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.