Skip to main content

Command Palette

Search for a command to run...

Todo list application with react hooks

Published
1 min readView as Markdown

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

More from this blog

Chowhan's blog

29 posts

A Passionate software developer