This is why you need the key property in React

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

------------

[kelvinchin]

Thank you for visualising it and even giving the example on what will happened if using the index of the array by reversing the order of the components. This did helped a lot

[dogik]

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

[pujanparikh]

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

[planetmall]

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

[pesterenan]

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

[Scorpion-oo]

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.

[beakerbkr]

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

[rathodsandeep]

When it come to quality content this guy never dis

[dioncodestu]

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

[john_dren]

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

[tiktokspicyfyp]

thank you, thank you you earned a subscriber

[reezuleanu]

I had a grid where you could add/edit/remove elements. I added keys to them because of a warning i saw in the console. A few days later, i was debugging my code for hours (if you deleted any element except the first one within the column in the grid, it would still display, despite re rendering), only to go absolutely insane and start deleting stuff. My code worked perfectly as it was as soon as i removed all keys. These keys can go to hell

[voidedname]

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

[L-Wassa]

You can also let React assigning the keys by using: => <Component />)

[marjanlukavyi]

what is the plugin for displaying errors near the code?

[coldym]

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

[willyhorizont]

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

[woops]

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?

[o.h.n.o.]

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?

[theofanisbirmpilis]

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?