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.
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.