Todo list application with react hooks
import "./styles.css";
import { useState } from "react";
export default function App() { const [todoList, setTodoList] = useState([]); const [input, setInput] = useState("");
const addItem = (e) => { if (input.length) { const item = { id: Math.random(), todo: input, isCompleted: false }; setTodoList([...todoList, item]); setInput(""); } };
const removeItem = (id) => { const removeArr = [...todoList].filter((todo) => todo.id !== id); setTodoList(removeArr); }; return ( <div className="App"> <input type="text" value={input} onChange={(e) => setInput(e.target.value)} /> <button onClick={addItem}>Save</button> <ul> {todoList.map(({ id, todo, isCompleted }) => ( <li className={isCompleted ? "todo strike" : "todo"} onClick={() => removeItem(id)} > {todo} </li> ))} </ul> </div> );}
