-------------- List Item 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} </li> </div> ); } export default ListItem; -------------- 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); } 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) => ( <ListItem text={items} /> ))} </ul> </div> </div> ); } export default App;