learning-react | code samples for Learning React | Frontend Framework library

No, I mean remove the { } curly brackets from the return block.

And also, change this line:

color => color.id !== id is a predicate that's used to remove the color of the id that is passed to your removeColor function.

How this works is the filter function will iterate through each item of the array (colors in this example) and pass that item to a function you provide to check if it should be removed from the list. If the function is true, it's removed.

color => color.id !== id is the function that's called for each item, so if the current color's id equals the id that is passed to the removeColor function, then it's removed.

One thing to note is the original array isn't changed, it just returns a new array (newColors) with the items removed.

issue is when toggleDoneTask gets memoized. when it gets memoized, its inner referenced state value are also memoized, corresponding an outdated state value.

once you click at 1, Task 2 and 3 will use the same previous props, where toggleDoneTask has not the current state.

to solve this you need to refactor toggleDoneTask. instead of updating state as setTaskItems(tasks) you need to pass a function to your setState like setTaskItems(prevTasks => { // ... some logic; return nextask}). passing a function, prevTasks param will be always the correct one.

given all that, if you refactor toggleDoneTask like below everything will work as expected: