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:

Join this channel to get access to perks:

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

🔗Moar Links

[HarisSohail-zomh]

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}

[avertry]

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.

[mrholmes]

Great videos mate learning alot from you!

[samsorge]

Great Tutorial, so happy I found your channel

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

[Cooper_]

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

[AravinthK-qk]

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