ReactJS Tutorial 43: Marking Todo Items As Complete

In this lecture we will learn how to mark todo items as completed in React.

[woodzeppelin]

Thank you for taking your time, energy and enthusiasm to create these tutorials for us. Compared to others i have seen and abandoned watching, this is by far the best. I just need to practice😊😊.

[varshiniramalingam]

Thank you so much! I have seen many tutorials and found this one bestest tutorial ever...you are doing great👍

[christophermawela]

Totally agree with the previous comment, I have abandoned other tutorials, Your explanations in breaking down complex topics is outstanding, nothing can compare to this, I'm looking forward to learning other subjects like NodeJS, NextJS and TypeScript, please also upload JavaScript Course on these channel, I have learnt JavaScript. I want to learn it from your channel. I don't need more than this in React, Thanks a million...

[watdehan]

Thank you for amazing tutorial ! I have a question regarding handling the click of the item 02:38. Any reason why we should pass the item name to handleClick? Since our function itself already have a reference to the item name in the parameter. Instead of passing the item name again to the function, I think we can just directly get the item name from our parameter in the TodoItem right?

[hanyhassan]

Thank you for the video but isn't the item itself is shared in the full todoitem so no need to send any details for the click event ?

[devcohen]

Your tutorial has been very helpful. I have an issue: lets say I crossed off the top item on the list. If I delete it, the next item following gets crossed off even though it wasn't crossed off in the beginning. How do you fix that?

[damariceakinyi]

Hello sir, at 14:53 where you said that one can change the 'className' to another work of their choice, I tried that with 'strikeThrough' but it did not work. The console states that "React does not recognize the `strikeThrough` prop on a DOM element" and suggests that I change it to lowercase, which I did and repreated the process. It did not work still. Ultimately, I decided to change it back to the one you used, 'className', and it worked well. So I think I'll just stick to 'className' for the sake of my mental health😅

Otherwise, thank you so much for this amazing tutorial! 🙏

[nilachalsethi]

Thank you so much for sharing the useful contents, could you please share the git repo as well ?

[manuelkellner]

Great guide man! One thing I'm curious about: why is the change of the done property not immediately reflected in the console log? I tried to thread sleep for 5 seconds before logging, and it still is not reflected. First I thought it was because it's an asynchronous operation, and the instant console log is just too fast; but that should be covered by the waiting. Any ideas?

[AnupumPant]

I love the way you explain things. Everyone else is more focused on getting stuff done and don't explain things sufficiently. Thanks for that.
There isn't a real good explanation for why certain steps are being used to setup the backend DB etc part of the full stack. Do you plan to make this part too? It would be great if you did. Thanks!

[govindaupadhya]

In this cant we just put id in the span for the item and pass down the object with the same task as parameter to the handlecomplete function ?

[MagicAndReason]

Translating this to TypeScript wasn't too difficult except for one step. The JS as written in handleClick() will throw an error because in the ternary operator's false section, the todos.map() returns void. I asked Google Gemini about this, and it said:

Conditional Operator: todo.name === name ? ... : todo

The issue arises within the conditional operator.
If the condition (todo.name === name) is true, you're trying to spread the todo object and update its done property using the logical NOT operator (!). This part is valid.
However, the error points out that the type of the entire expression after the colon (todo.name === name ? ... : todo) becomes void.

Why is void involved?
The conditional operator itself returns either the value of the expression before the colon if the condition is true, or the value after the colon if the condition is false.
In your case, if the condition (todo.name === name) is false, the expression after the colon is simply the unchanged todo object.
However, in TypeScript, spreading an object within a conditional operator like this results in the type becoming void.

The solution that worked for me without throwing was this:
const newTodos = todos.map((todo) => {
const isMatchingTodo = todo.name === name;
return isMatchingTodo ? { ...todo, done: !todo.done } : todo;
});

This approach uses a separate variable (isMatchingTodo) to hold the result of the comparison. Then, the conditional expression uses this variable to decide whether to return the modified object or the original todo.

As I've said before, I'm experienced, but new to TypeScript & React and therefore happy to see any suggestions or corrections. Thanks.

[oluwatoyosiolaniyan]

hello sir, but why did you not change item to (item.name) in the handleDelete function just like you did to the handleClick???

[ojitelikenechukwu]

Please can someone be kind enough to show me how to implement the text decoration == line-through, using an external or internal css

How do i call the style when trying to use the ternary operator?

[VishalJangid]

why is it working without calling setTodo
setTodos(todos.map((todo)=> todo.name === name ? {...todo, done:!todo.done}:todo));