# 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](http://todo.id) !== id); setTodoList(removeArr); }; return ( <div className="App"> <input type="text" value={input} onChange={(e) => setInput([e.target](http://e.target).value)} /> <button onClick={addItem}>Save</button> <ul> {[todoList.map](http://todoList.map)(({ id, todo, isCompleted }) => ( <li className={isCompleted ? "todo strike" : "todo"} onClick={() => removeItem(id)} > {todo} </li> ))} </ul> </div> );}