Strikethrough a list item in react todo list - node.js

Question

I am trying to create a to-do list app with a timestamp and strike-through the list item when the delete button is clicked, but when I click the delete button all the items get stricked-through.
I have looked everywhere but I cant get it to work for my code. I am able to extract unique id through delete button function but i cant understand how to use that id to strike only that id.
import "../App.css";
import moment from "moment";
const List = () => {
const [strike, setStrike] = useState(false);
const [addtime, setaddTime] = useState(moment().utcOffset("+05:30").format("YYYY-MM-DD HH:mm:ss ").toString());
const [store, setStore] = useState([]);
const [endTime, setendTime] = useState();
const [inputData, setInputData] = useState('');
const [items, setItems] = useState([]);
//to add an item
const addItem = () => {
if (!inputData) {
} else {
const allInputData = {id: new Date().getTime().toString(), name:inputData}
setItems([...items, allInputData]);
setInputData("");
setaddTime(
moment().utcOffset("+05:30").format("YYYY-MM-DD HH:mm:ss ").toString()
);
setStore([...store, addtime]);
}
};
// to delete an item
const deleteItem = (index) => {
const boolstrike = items.filter((elem) => {
return index == elem.id;
})
console.log(boolstrike);
setStrike(!!boolstrike);
};
//to remove time
const deleteTime = () => {
setendTime (moment().utcOffset("+05:30").format("YYYY-MM-DD HH:mm:ss ").toString());
}
// to remove all items
const removeAll = () => {
setItems([]);
setStore([]);
};
return (
<>
<div className="parent-div">
<div className="child-div">
<h3>TO DO LIST</h3>
<div className="addItems">
<input
type="text"
placeholder="what needs to be done?"
value={inputData}
onChange={(e) => setInputData(e.target.value)}
/>
<button
type="button"
onClick={addItem}
className="btn btn-secondary"
>
Create
</button>
</div>
<div id="wrapper">
<div id="left" className="showItems">
{items.map((elem) => {
return (
<div className="eachItem" key={elem.id}>
<h3
style={{
textDecoration: strike ? "line-through" : "none",
}}
>
{elem.name}
</h3>
<button
type="button"
onClick={() => deleteItem(elem.id)}
className="btn btn-danger btn-sm"
>
Delete
</button>
</div>
);
})}
</div>
<div id="right">
{store.map((elim, ind) => {
return (
<div className="eachdate" key={ind}>
<h6>{"Task Created at:" + elim} </h6>
<button
type="button"
onClick={() => deleteTime()}
className="btn btn-danger btn-sm"
>
Delete
</button>
</div>
);
})}
</div>
</div>
<div className="showItems">
<button onClick={removeAll} className="btn btn-danger">
Delete All
</button>
</div>
</div>
</div>
</>
);
};
export default List;```

Answer 1

You can try to add strike in the items obj and track that. in that way, if delete btn is clicked, you can mark that item as strikedout.
You can set strike while delete
const deleteItem = (index) => {
const updatedItems = items.filter((elem) => {
if (index == elem.id) {
elem.strike = true;
}
return elem;
});
setItems(updatedItems);
};
and based on this property class will be applied, only deleted items will strick out.
updated code:
import React, { useState } from 'react';
import './App.css';
import moment from 'moment';
const List = () => {
const [strike, setStrike] = useState(false);
const [addtime, setaddTime] = useState(
moment().utcOffset('+05:30').format('YYYY-MM-DD HH:mm:ss ').toString()
);
const [store, setStore] = useState([]);
const [endTime, setendTime] = useState();
const [inputData, setInputData] = useState('');
const [items, setItems] = useState([]);
//to add an item
const addItem = () => {
if (!inputData) {
} else {
const allInputData = {
id: new Date().getTime().toString(),
name: inputData,
};
setItems([...items, allInputData]);
setInputData('');
setaddTime(
moment().utcOffset('+05:30').format('YYYY-MM-DD HH:mm:ss ').toString()
);
setStore([...store, addtime]);
}
};
// to delete an item
const deleteItem = (index) => {
const updatedItems = items.filter((elem) => {
if (index == elem.id) {
elem.strike = true;
}
return elem;
});
setItems(updatedItems);
};
//to remove time
const deleteTime = () => {
setendTime(
moment().utcOffset('+05:30').format('YYYY-MM-DD HH:mm:ss ').toString()
);
};
// to remove all items
const removeAll = () => {
setItems([]);
setStore([]);
};
return (
<>
<div className="parent-div">
<div className="child-div">
<h3>TO DO LIST</h3>
<div className="addItems">
<input
type="text"
placeholder="what needs to be done?"
value={inputData}
onChange={(e) => setInputData(e.target.value)}
/>
<button
type="button"
onClick={addItem}
className="btn btn-secondary"
>
Create
</button>
</div>
<div id="wrapper">
<div id="left" className="showItems">
{items.map((elem) => {
console.log(elem);
return (
<div className="eachItem" key={elem.id}>
<h3
style={{
textDecoration: elem.strike ? 'line-through' : 'none',
}}
>
{elem.name}
</h3>
<button
type="button"
onClick={() => deleteItem(elem.id)}
className="btn btn-danger btn-sm"
>
Delete
</button>
</div>
);
})}
</div>
<div id="right">
{store.map((elim, ind) => {
return (
<div className="eachdate" key={ind}>
<h6>{'Task Created at:' + elim} </h6>
<button
type="button"
onClick={() => deleteTime()}
className="btn btn-danger btn-sm"
>
Delete
</button>
</div>
);
})}
</div>
</div>
<div className="showItems">
<button onClick={removeAll} className="btn btn-danger">
Delete All
</button>
</div>
</div>
</div>
</>
);
};
export default List;