React ToDo App: Done Button Is not Working

I am currently making a ToDo App.
The app is almost done but i want to make the green check box when clicked to change the style of that specific todo that is completed.

I have tried and the most i got was all elements to change style or none.

Here is the project:
https://codesandbox.io/s/z567lm8wp

I also looked at nested state. But everyone i read says that nested state is over all bad design practice.

How do i make this button work?

What’s your done variable in your state?

What behavior are you expecting?

There’s a lot of code refactoring that you could do here and also a lot of unnecessary logic imo. But for the problem at hand, the issue is from your map function on line 40 in App.js – you never return the item again, so newStyledItems is undefined. Return is implied when you don’t have a block after the arrow function, but since you do, you have to specify it.

When the green button is clicked the state is changed of done from false to true and when done is changed you can apply the style of completedStyle to that specific element that was clicked.

That was my initial reasoning behind done in state.
I did that and all of the items and not just the one i clicked changed style.

Ok but my issue is. How do i apply inline style to specific element on array of objects, that is in a child component (TodoItem.js) while i specify the style in parent component (App.js)

How do i properly select that item with click on a button in that item, and then give the item this design and then apply the design so the item will look differently from other items that are not completed?

You can add a class to the item if the the item is done. So you’ve already added some CSS for this class, but now you have to toggle it if the item is done. This class applies to the li in TodoItem.js. So you can use string interpolation to add the class done to the li element when item.done is true.

I have Good News and Bad News.

God News is that i did. Bad News is that gave up the initial design to adapt to the new solution.

Instead of a Button Done, i used checkbox which have a property checked that returns true or false. that was really handy.

and i just use event to update the state of the done property.

Little bit of research did the job.

And when for that specific object done is true, you can do a little logic and change the design.

The design is similar to commercial todos. Is not as fancy but is good enough.
I learned a lot with this app.

Thanks for your help.
This is the final solution: https://codesandbox.io/s/z567lm8wp