I am a beginner when it comes to coding with React or JS.
I was trying to create a To-Do list wherein I can add or delete tasks (which I have already accomplished). However, I wanted to add another functionality of a ‘Done’ button which will strike through the specific task item on click.
My react code areas of interest look like this:
function Todo(){
const [tasks, settask] = useState([]);
const [newtask, setnewtask] = useState("");
function handle_change(event){
setnewtask(event.target.value);
}
function update_todo(){
if(newtask!=""){
settask(t => [...t, newtask]);
setnewtask("");}
}
function delete_task(index){
const a = tasks.filter((_, i) => i!=index);
settask(a);
}
function strike(index){
// const striked = {textDecoration: "line-through"};
tasks[index].style.textDecoration = "line-through";
}
return(
<div id="main">
<h1>To-Do List</h1>
<div id="add">
<input type="text" id="add_item" placeholder='Enter your task' value={newtask} onChange={handle_change}></input>
<input type="button" id="add_button" onClick={update_todo} value="Submit"></input>
</div>
<div id="list">
<ol>{tasks.map((element,index) => <li key={index}>
<div className="list_item">{element}</div>
<div className="button_container">
<button className="delete" onClick={() => delete_task(index)}>Delete</button>
<button className="done" onClick={() => {strike(index)}}>Done</button>
</div>
</li>)}
</ol>
</div>
</div>
)
}
I have implemented the above code, but the done button functionality is doing nothing, I tried multiple ways but none of them is working.