Rendering a List of Components in React

Using map to create a list of components super common in React. You need to know how to use map correctly, and this video will show you how
This is video #4 in my react series:
#3 React Props Explained: • React Props are Easy
#5 Event Listeners in React: • This Is How You Handle...
Join this channel to get access to perks:
/ @sammeechward
Chapters:
0:00​ Intro
0:20 App Setup
1:20 The wrong way
1:35 Array of Components
2:40 For Loop
3:45 Key
5:35 Map
7:12 Filter
7:41 Summary
beta.reactjs.org/learn/render...
🔗Moar Links
My Website: www.sammeechward.com
Instagram: / meech_ward
Twitter: / meech_ward
Github: github.com/orgs/Sam-Meech-Ward

[@HarisSohail-zo5mh]

You taught this concept in 8 mins that my teacher couldn't do in 90 mins. Cheers

[@Pareshbpatel]

So many key React concepts explained along the way. Thanks, Sam PS You have a great teaching style. {2023-06-07}

[@avertry9529]

Last week I found out why we shouldn't use the index as key. for example if index 0 is deleted, all the keys change their value as the index shifts(1 becomes 0, 2 becomes 1, etc.) Then ALL are re-rendered instead of just the updated or deleted one. The reason your code works without a key, is React will use the index itself, with a warning. I find it really useful to know why things work or don't work, and it helps in memorisation.

[@shinobi1975]

May I know where you find this?

[@avertry9529]

@@shinobi1975 Cannot remember sorry.

[@jellyjollyjelly9513]

You deserve more fame

[@samsorge27]

Great Tutorial,so happy I found your channel

[@mrholmes1266]

Great videos mate learning alot from you!

[@SamMeechWard]

Thank you

[@alexandergeorgesquire220]

Very nice thanks Sam

[@siavoshoon]

Greate job, same as always👍

[@fromagetriste]

great video

[@alhamdulilah6892]

Thanks!

[@mistercakes]

good video. i understand that there should be uniqueness to the elements in the json array, but it's not very clear to me why there isn't an error when you create the joke component dynamically, as it looks like it only accepts joke and rating as arguments. i'm guessing it's something in vanilla javascript with how a function accepts arguments, but it's not very intuitive.

[@user-rh5bd7ss3t]

what if i am render a table instead of the joke component for me its getting page unresponsive if i render 30 tables inside that different rows and columns

[@Cooper_246]

How did you make the like button glow like that, when you said to press it? Never seen that before, cool.