---------------- App Page --------------- import React, { useState } from "react"; import ListItem from "./ListItem"; function App() { const [input, setInput] = useState(""); const [task, setTask] = useState([]); function handleChange(event) { const newTask = event.target.value; setInput(newTask); } function deleteItem(id) { console.log("Delete this", id); setTask((prevTask) => { return prevTask.filter((item, index) => { return index !== id; }); }); } const listTasks = [...task]; function addTasks() { setTask((prevTask) => [...prevTask, input]); } return ( <div className="container"> <div className="heading"> <h1>To-Do List</h1> </div> <div className="form"> <input type="text" name="tasksName" onChange={handleChange} /> <button onClick={addTasks}> <span>Add</span> </button> </div> <div> <ul> {listTasks.map((items, index) => ( <ListItem key={index} id={index} text={items} delete={deleteItem} /> ))} </ul> </div> </div> ); } export default App; ------------------ Input List Page ------------- import React, { useState } from "react"; function ListItem(props) { const [conditionLine, setLine] = useState(false); function HandleChange() { setLine((prevValue) => { return !prevValue; }); } return ( <div onClick={HandleChange}> <li style={{ textDecoration: conditionLine && "line-through" }}> {props.text} <button className="button_list" onClick={()=>props.delete(props.id)}> <span>Delete</span> </button> </li> </div> ); } export default ListItem;