ozcanzaferayan

<span
  onClick={() => completeAt(index)}
  style={{ textDecoration: item.isCompleted ? "line-through" : "initial"}}>
  {item.name}
</span>

ozcanzaferayan

import React, { useState } from "react";
import { useRecoilState, atom } from "recoil";

const todoListState = atom({
  key: "todoListState",
  default: [
    { name: "Apples", isCompleted: false },
    { name: "Eggs", isCompleted: false },
    { name: "Butter", isCompleted: false },
  ],

ozcanzaferayan

const todoListState = atom({
  key: "todoListState",
  default: [
    { name: "Apples", isCompleted: false },
    { name: "Eggs", isCompleted: false },
    { name: "Butter", isCompleted: false },
  ],
});

ozcanzaferayan

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);

ozcanzaferayan

const editItemAt = (index) => {
  const todos = [...todoList];
  var item = prompt("Change item name", todoList[index]);
  todos[index] = item;
  setTodoList(todos);
};

ozcanzaferayan

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);

ozcanzaferayan

{todoList.map((item, index) => (
  <li key={item}>
    {item} <button onClick={() => deleteItemAt(index)}>Delete</button>
  </li>
))}

ozcanzaferayan

const deleteItemAt = (index) => {
  const todos = [...todoList];
  todos.splice(index, 1);
  setTodoList(todos);
};

ozcanzaferayan

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);

ozcanzaferayan

<button onClick={() => setTodoList((todos) => [...todos, todo])}>Add</button>