Full React Tutorial #10 - Outputting Lists

Hey gang, in this React tutorial we'll see how to output lists of data in our component templates. We'll do this using the JavaScript map method.

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[johnconnor]

[
{ title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
{ title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
{ title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
]

[RajPatel-isem]

.blog-preview{
padding: 10px 16px;
margin: 20px 0;
border-bottom: 1px solid #fafafa;
}

.blog-preview:hover{
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
}

.blog-preview h2{
font-size: 20px;
color: #f1356d;
margin-bottom: 8px;
}

[maulvath]

other tutorials: "So you use this and this and that, and there you go"
This one: "Carefully explain each elements in multiple different way, shows exemple of what doesn't work, before explaining why"

Thank you very much for this playlist, i was in a bit of a down due to general confusion linked to react, but you have explained everything very well and i finally feel like i'm learning a lot!

[unknownman]

It's been 4 months since I've not used react because I'm focussing more on Data structures at the moment. These updated React videos are what I needed to brush up my concepts. Thanks Shaun, you are great.
Also, Happy New year to you and your family.

[Jacksons_are_jackson]

this dude deserves a medal for giving us quality knowledge

[dynerushd]

Your tutorials are the best dude! Although I just discovered your channel my motivation in finally learning React has skyrocketed. Thanks man, keep them going!

[mudrank]

I was a bit confused about choosing a react course on youtube and udemy. Then was just searching around your channel and I got a notification of this course and I loved thank you so much for this course. You are a great teacher
Also, Happy New year to you and your family 🎉.

[personwholikesturtles]

I already know this stuff but I;m following this course anyways :)

[MeonisRP]

Dude, thank you! I finally understood how this thing works in React!!!

[ruinfirefly]

At 3:22 why do we use parenthesis( ) instead of curly brackets{ }

[jonathanlevy]

Right here!! Love your accent, thank you you're the best one out there, I been watching you're node js tut back when you had way less subs. I like the fact that the channel is way bigger now, keep up the excellent work!

[nielfollero]

Why are we using parentheses in map function instead of curly braces?

[soltiscd]

Can't wait to see more about hooks and how you go about using/explaining it. Much thanks for sharing your knowledge.

[sevrast]

Shaun, my man, this is the cleverest and smartest knowledge I've found! My biggest gratitude and I wish you best. Gonna continue watch your tutorials and I'm hoping that it'll help on the way to me becoming jun.
Warm welcome from Russia.

[andriesvanwyk]

You, sir, are a PHENOMINAL tutor! Thank you!

[canklc]

One tutorial after breakfast, another one before going to bed. This is how I am going to make my way to my dream insallah :) Hope to be a ninja with a sharp sword soon.

[jsnelson_]

any reason why the .map() function is wrapped in () instead of {}? is it because it is already wrapped in curly braces from the beginning? for example: i originally wrote blogs.map((blog) => {}) instead of blogs.map((blog) => ()) which caused an error and I had to look closely to see what I was doing wrong. Also curious why forEach doesnt work with this example?

[rouziuzi]

I finally realized how to use this output with your output from node js tutorial. Thank you so much <3.

[tomaszswiatek]

I'm already up to date with this tut:), thx Shaun:)

[JavedIqbal-]

Very informative series. I know little bit stuff but this series clear all my doubts like useState and more to come. I'm learning React to get a React developer job. Thanks Shaun, you are superman.