I am trying to strike through a list item once a user has clicked on that particular item.
I have created a function to conduct the style change
const completed = () =>{
return document.getElementById("demo").style.textDecoration='line-through'
};
The list is generated as below, i have used material ui library
<List dense={dense} >
{items.slice(0).reverse().map(x=> (
<ListItem key={x.id} button id="demo" onClick={completed} divider>
<ListItemText primary={listItems(x)}/>
<ListItemSecondaryAction />
</ListItem>
))}
</List>
From the code i have written i am able to strike only through the first item of the list. Whenever i add new items , always the only item i am able to strike through is the first item.
I am trying to find a way to apply this to all the elements on the list