This is why you need the key property in React

I conceptually understand why the key prop is important. I can't replicate it in my own app properly though. In a more complex application where let's say we are mapping through an array of objects. Where do we put the key prop when there are multiple properties to use within the mapping? i.e. Product Card with product.title, product.description, etc

so simply explained, not sure why we don't see such a lucid example elsewhere. thank you so much!

I had a doubt. If I assume that I have 2 li elements from my array and now I add one more say by a button click, and the addition happens at the end of the array, will react understand that a new addition was made and not re render the entire list?

Great example!

What name color theme vscode

You can also let React assigning the keys by using: React.Children.toArray(numbers.map(() => <Component />)

Seriously great content. Keep doing what you’re doing! Great job!

Hi! Since you mentioned eslint, I wanted to ask: on your proyects, do you use eslint for enforcing rules AND formatting, or do you use prettier for formatting and eslint only for the rules? I looked this up, but it seems like every single article has a different way to set it up, or a different opinion. Have you made a video about this before?

I have no clue what your talking about and I’m gonna go into computer science degree. Should I worry?

And then react is complaining about not having keys for fragments...
And I ask myself why, when it removes fragments anyway.

You mentioned not using index, but never mentioned why. Is there a reason why we shouldn't use that?

That was a great way of showing whi this is important! Thanks for the video!

Good example right there. Still in some cases you don't have any specific id, especially if you have some items inside items, I still remember in my 2 months intern that I was supposed to write 3 purchase offers (3 Kind of services) width 20 features they provide. I just used the index as key after my boss was wondering what these generated ids are. If you google these stuffs some people just not see it as optimal way to generate these keys, but you also can't just use the index 🥴. I hated the css part in my internship, just wasted so much time with css. But I still learn more about React and TS. Glad that I was able to write code, some people in my class had done nothing in their intern, nothing worse than doing nonsense and waste potential. A teacher just asked me if I'm interested to work in his Startup, great experience.

^^ the reason I prepended the numbers in my demo was due to render order and state association. As I stated in my video, since it matches them by render order, we want to add the items out of order. If we add them in order the new item will be at the end, but that's also a new spot in the render sequence => it gets a new state, everything before will be matched to the same state and we won't see this bug, even though it is happening. Glad my demo was helpful to you.

what is the plugin for displaying errors near the code?

Off topic question, do you plan on a video series on react testing library?

what is the extension name you are using for error finder?

When it come to quality content this guy never dis

What is that in the cursor? Is that chrome extension or software? Whats that name?

Everyone is talking about how bad is this but nobody explains why! Thanks!

I still catch this during peer reviews. Thanks for talking about this!

Off topic question, do you plan on a video series on react-router 6.4? The implications for useRouteLoaderData has me beyond excited

Good job babe

Are u considering creating any udemy courses on React? Do you have any course recommendations for someone who knows the basics of React but wants to get to the next level?

Love this one ☝️

Cool example for showing the reason behind using the key property. Love the content!