When you generate a dynamic list of elements in React's JSX, each element in the list needs a key attribute. This tutorial explores how to generate a list with the higher order function map() and apply the required keys to each element. In addition, this tutorial expands the project and builds out some additional functionality for the list items applying what was learned in the previous tutorials in the series. A link to the full Learn React playlist is above in the description. If you are new to Javascript, I recommend starting with my full 8 hour Javascript tutorial for beginners here: ua-cam.com/video/EfAl9bwzVZk/v-deo.html
it was rather complicate and not easy to learn but now im excited to see react differently through your teachings. It started to clear up little by little .great thx
Hey Dave, I am following your tutorial and was confused with onDoubleClick event listener as it wasn't needed in my case. The only difference in my code is that I had to use htmlFor attribute for a label as otherwise I was getting an error. I installed eslint following some tutorial online and airbnb styleguide but that has many unexpected quirks, especially when following tutorials. Would be great to see a video about your working environment setup and yes I already watched your top 5 VS Code extensions for beginners. Great content and I love how you keep mentioning useful shortcuts when working with the code editor as it extremely helpful.
Thanks for the notes! My working VS Code setup is pretty much what you see in the tutorials. I know some that add a lot to theirs, but I keep it very plain. The bracket pair colorizer 2 extension does help me and I usually keep prettier running, too.
Thank you. I was wondering if you used any linting rules // style-guides but I guess is the best to keep things simple at the beginning as my example shows. Often you mention keyboard shortcuts but I might have missed how do you change multiple items at the same time Ctrl + D?
I read that keys are needed for react to detect the changes (add, update and delete) in a list but I know it worked for me without them and I was wrong, I just discovered that react will use list indexes for keys if not explicitly assigned which explain why id did work for me. With all my current workload, I feel like I still need to do my homework as a student, Thanks Dave,
Good note Ahmad. Yes, index should be available. Without explicit assignment of keys, I believe an error will show in the console while the JSX may still render. 🤔😃
Can you explain why we need to spread ...item in Line 24. I understand items.map loops through items and stores the object into item. We then check if item.id === id that was passed in. If True we need to spread item. This is where i'm confused. Couldn't we just say ? !item.check: item)'. Thanks
Hi Steven, I'm going by memory as I have many videos, but you can provide a timestamp with your questions if you want to provide a specific reference. When you update the state of an object, you need to spread in all the properties. If you do not, you will erase them all. I go into detail with examples about this at the 10 minute mark of this video: ua-cam.com/video/yvTGXH7uybA/v-deo.html
New to your channel, and just subbed. Great tutorial series, many thanks. I come from a old school html/JS/Jquery background - it really does look weird when I see "html like" (JSX) code within javascript. So far it seems more disorganised to me.
11:40 - I've been developing HTML for a few years and it's only now I've come across tabIndex is. I'm assuming that keeping it at '0' means that the browser determines the tab order as opposed to the developer. Is that right? If you were going to set a tab index order, I suppose we could do so by using the curly braces and adding a reference to the index 'i' argument in the .map function. Is it a bad idea to set a tab order?
Good questions! The assumption about how tabindex works is not quite accurate. A tabindex of 0 puts the element in the sequential tab order. More on tabindex here: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex Thanks for the note! 💯
Excuse me, 20:23 Q1:I can't understand what meaning is? { ...item, checked: !item.checked } I understand { ...item} or {checked: !item.checked }, but { ...item, checked: !item.checked }, I can't understand, can you explain it? Q2:Why use ...item? I know it is spread syntax.. but I can't understand why "...item" is work in the Ternary Operator? I've been thinking about it for a long time. (I have seen map(), Spread_syntax and Ternary Operator in MDN)
If my memory is correct you are working with todo list items here. The object is one item. An item has multiple properties. When you see the spread operator here, we are spreading in the properties of the item to create a new object. The comma is added in order to add one more property to the object. If we add a property that already exists like the property checked, then the new property checked will overwrite the previous one. So in the example you are asking about, we spread in the properties including the existing checked property, but then we overwrite the checked property with the opposite value (true or false).
could you explain why style={(item.checked) ? { textDecoration: 'line-through' } : null} updates the html without having to issue a re rendering of the page?
I think I understand now. Clicking the checkbox issues a state change which triggers a re-render of the component. The value of the linethrough style is based on the new state that triggered the re-render
const handleCheck = (id) => { const listItems = items.map((item) => item.id === id ? { ...item, checked: !item.checked } : item); setItems(listItems); above code is totally confusing for me why to ...item spread items could you explain in a bit laymen term????
Hi Lavesh. When you first spread in item, it has all of the object properties. You follow it with a comma and then provide the checked property to overwrite the previous checked value. It is a true/false, yes/no type of value so when we say !item.checked, it sets it to the opposite of what it was before.
That's a good question, and I realize it is different from what you typically see in Javascript functions. Parenthesis group multiple lines of code in a return. In your example, I used map() which is a higher order function. It returns values and the value being returned in this example is on several lines of code. I hope that helps!
When you generate a dynamic list of elements in React's JSX, each element in the list needs a key attribute. This tutorial explores how to generate a list with the higher order function map() and apply the required keys to each element. In addition, this tutorial expands the project and builds out some additional functionality for the list items applying what was learned in the previous tutorials in the series. A link to the full Learn React playlist is above in the description. If you are new to Javascript, I recommend starting with my full 8 hour Javascript tutorial for beginners here: ua-cam.com/video/EfAl9bwzVZk/v-deo.html
im actually grateful. this time when i felt stuck i looked for your series . im excited to see react differently through your teachings.
Glad I could help!
Dave i can tell you’re a natural teacher. The way you explain reason why you do certain things makes so much sense to me. Kodus
Thank you 🙏 I appreciate your kind words 💯
You have a knack for breaking down the complex things into simple ones. Really loved these lectures. Thank you very much
Glad you like them!
I've found your channel today and have already cleared all my doubts. Your examples are way easier to understand. Thanks a lot.
I'm glad to hear that! You're welcome!
Your explanation is very clear. Thank you for your videos. Dave
your tutorial is top quality, extremely neat and to the point, helps a lot, great thx
You're welcome!
it was rather complicate and not easy to learn but now im excited to see react differently through your teachings. It started to clear up little by little .great thx
Glad to hear it!
I get more comfortable with react the more i advanced with this series
Thanks Dave Gray for This Informative Video ...
Every thing is explained with shortcut keys. I am feeling that in near future it turns me out as a cool developer. Bundle
thanks, Dave Gray!🤩🤩
You're welcome!
@@DaveGrayTeachesCode pleasure of mine Sir!
Hi Dave, I don't know how to thank you. Thank you so much for your great tutorials.
You're very welcome!
One request: can you repeat the development in the above part, with the useReducer?
Hey Dave,
I am following your tutorial and was confused with onDoubleClick event listener as it wasn't needed in my case. The only difference in my code is that I had to use htmlFor attribute for a label as otherwise I was getting an error.
I installed eslint following some tutorial online and airbnb styleguide but that has many unexpected quirks, especially when following tutorials.
Would be great to see a video about your working environment setup and yes I already watched your top 5 VS Code extensions for beginners.
Great content and I love how you keep mentioning useful shortcuts when working with the code editor as it extremely helpful.
Thanks for the notes! My working VS Code setup is pretty much what you see in the tutorials. I know some that add a lot to theirs, but I keep it very plain. The bracket pair colorizer 2 extension does help me and I usually keep prettier running, too.
Thank you. I was wondering if you used any linting rules // style-guides but I guess is the best to keep things simple at the beginning as my example shows.
Often you mention keyboard shortcuts but I might have missed how do you change multiple items at the same time Ctrl + D?
@@notusedbrain you are right - Ctrl + D will select multiple instances and let you edit them all at once.
I read that keys are needed for react to detect the changes (add, update and delete) in a list but I know it worked for me without them and I was wrong,
I just discovered that react will use list indexes for keys if not explicitly assigned which explain why id did work for me.
With all my current workload, I feel like I still need to do my homework as a student,
Thanks Dave,
Good note Ahmad. Yes, index should be available. Without explicit assignment of keys, I believe an error will show in the console while the JSX may still render. 🤔😃
I'm watching this series as a nice React refresher and to pick up some tips. Didn't know about React Icons, so thanks for that!
You're welcome! 💯
I'm so happy to find your channel. Your videoes are very useful. Thank you so much.
You're welcome!
As a react beginner I can tell this a very important video
Absolutely! Thanks for the comment.
Thank you Dave!
Can you explain why we need to spread ...item in Line 24. I understand items.map loops through items and stores the object into item. We then check if item.id === id that was passed in. If True we need to spread item. This is where i'm confused. Couldn't we just say ? !item.check: item)'. Thanks
Hi Steven, I'm going by memory as I have many videos, but you can provide a timestamp with your questions if you want to provide a specific reference. When you update the state of an object, you need to spread in all the properties. If you do not, you will erase them all. I go into detail with examples about this at the 10 minute mark of this video: ua-cam.com/video/yvTGXH7uybA/v-deo.html
I am rooting for you to reach the 100k milestone 💯
Thank you! 💯🚀
New to your channel, and just subbed. Great tutorial series, many thanks. I come from a old school html/JS/Jquery background - it really does look weird when I see "html like" (JSX) code within javascript. So far it seems more disorganised to me.
I understand. I think you'll get used to it. Same happened to me!
why yours .map works without a return statement, but mine doesn't?
Thank you again!
Please explain handlecheck conditon
11:40 - I've been developing HTML for a few years and it's only now I've come across tabIndex is. I'm assuming that keeping it at '0' means that the browser determines the tab order as opposed to the developer. Is that right?
If you were going to set a tab index order, I suppose we could do so by using the curly braces and adding a reference to the index 'i' argument in the .map function. Is it a bad idea to set a tab order?
Good questions! The assumption about how tabindex works is not quite accurate. A tabindex of 0 puts the element in the sequential tab order. More on tabindex here: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex Thanks for the note! 💯
@@DaveGrayTeachesCode Thanks. That makes sense.
@@DaveGrayTeachesCode Is the reason you decided to add tabindex to the trashcans to improve accessibility for keyboard users? Thanks
Please explain handlecheck condition
Excuse me, 20:23
Q1:I can't understand what meaning is? { ...item, checked: !item.checked }
I understand { ...item} or {checked: !item.checked }, but { ...item, checked: !item.checked }, I can't understand, can you explain it?
Q2:Why use ...item? I know it is spread syntax.. but I can't understand why "...item" is work in the Ternary Operator?
I've been thinking about it for a long time.
(I have seen map(), Spread_syntax and Ternary Operator in MDN)
If my memory is correct you are working with todo list items here. The object is one item. An item has multiple properties. When you see the spread operator here, we are spreading in the properties of the item to create a new object. The comma is added in order to add one more property to the object. If we add a property that already exists like the property checked, then the new property checked will overwrite the previous one. So in the example you are asking about, we spread in the properties including the existing checked property, but then we overwrite the checked property with the opposite value (true or false).
@@DaveGrayTeachesCode thanks for the clear explanation! I had the question
Thanks Professor
could you explain why style={(item.checked) ? { textDecoration: 'line-through' } : null} updates the html without having to issue a re rendering of the page?
I think I understand now. Clicking the checkbox issues a state change which triggers a re-render of the component. The value of the linethrough style is based on the new state that triggered the re-render
Thank you for great tutorial.
i change the status with a for loop.
i want to know, is Maps performance is better then for loop? thank you.
You're welcome! I prefer map. I haven't looked into the performance. I'm guessing if there is a difference, it would be very small.
What is your icon theme?
vscode-icons
Love your work
Thank you!
thanks Dave
You're welcome!
Commenting for the algorithm
Thank you Sir!
Welcome!! 💯
Thank you
You're welcome!
npm i -D is same as save dep not save
const handleCheck = (id) => {
const listItems = items.map((item) => item.id === id ? { ...item, checked: !item.checked } : item);
setItems(listItems);
above code is totally confusing for me why to ...item spread items could you explain in a bit laymen term????
Hi Lavesh. When you first spread in item, it has all of the object properties. You follow it with a comma and then provide the checked property to overwrite the previous checked value. It is a true/false, yes/no type of value so when we say !item.checked, it sets it to the opposite of what it was before.
@@DaveGrayTeachesCode thanks dave got it. :)
why is it parentheses() instead of curly bracket{} after arrow ?
{items.map((item) => ( //why is it not curly bracket?
{item.item}
Delete
))}
That's a good question, and I realize it is different from what you typically see in Javascript functions. Parenthesis group multiple lines of code in a return. In your example, I used map() which is a higher order function. It returns values and the value being returned in this example is on several lines of code. I hope that helps!
@@DaveGrayTeachesCode Thank you for your explanation!!
@@aya2222 you're welcome! 🙏
7:17
Loved your teaching style. Just Amazing
Glad to hear that!
welp now this is when it starts getting hard
I totally confused in this video
Top
Thank you sir!
You are welcome!