Complete React Tutorial (& Redux) #14 - Outputting Lists

Hey gang, in this React tutorial I'll introduce you to the concept of cycling through lists of data and outputting that data in the component template. To do this, we'll use the map function.

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

🐱‍💻 Course Links:

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

[ApeKing]

Great tutorial, thank you!

For those who are using functions instead of class in your App.js you can do the same thing just like this:


import React from 'react';
import Ninjas from './Ninjas.js';

function App() {
const ninjas = [
{ name: "Ryu", age: 30, belt: "black", id: 1 },
{ name: "Yoshi", age: 20, belt: "green", id: 2 },
{ name: "Benedict Cumberbatch", age: 43, belt: "Old black", id: 3 }
];

return (
<div className="App">
<h1>My first react app!</h1>
<p>Welcome</p>
<Ninjas ninjas = { ninjas }/>
</div>
);
}

export default App;

[ajitsakri]

for people who are lazy to type data in state like me

{ name: 'Ryu', age: 30, belt: 'black', id: 1 },
{ name: 'Yoshi', age: 20, belt: 'green', id: 2 },
{ name: 'Crystal', age: 25, belt: 'pink', id: 3 }

[autoimmune]

Best explanation I have watched/read anywhere on the internet. Amazing as usual Sean!

[LeeWalpole]

Quite easily the best code tutorials I’ve come across. Quick, clean and easy to follow. Thank you :)

[johongirrahimov]

thank you man you are legend. you are my motivation. God has given you such a gift that you can explain complex concecpts in a simple term. Bless you man.

[luizamusic]

The way you structure your tutorials and ELI5 is extremely helpful. Thank you!

[danielalbert]

You got the best explanations man..May God bless you..

[hassanbenhajbouih]

here for the lazy
state= {
ninjas: [
{ name: 'Ryu', age: 30, belt: 'black', id: 1 },
{ name: 'Yoshi', age: 20, belt: 'green', id: 2 },
{ name: 'Crystal', age: 25, belt: 'pink', id: 3 }
]
}

thanks for this tutorial Net Ninja, you thought me everything i know.
just need the balls to start doing something with it XD.

[asmashaikh]

Yes I am also starting to like your videos netninja... You are simply awesome!! Your teaching style is wonderful!!!!

[SimPwear]

Liked before I even watched it! I know it's lit

[orz]

amazing tutorial. came from angular 1 and everything is so clear and fun when you explain like that.

[jgaurav]

Wow I probably watched and read 20 different videos or documentations. Never really understood or cared about the key property. Now i get it. Great explanation. Thanks!

[stalkeromakarov]

A few weeks back I've watched one of yours JS vcourse, now I'm watching this one, and I have only one question... Would you like to start teaching people how to do other things // like politics and etc cuz for me it looks like you can explain freackn everything in this world. Thank you )

[hossamsoliman]

For function App() instead of class App, you can use the following code :

import React from 'react';
import Ninjas from './Ninjas.js';

function App() {
const ninjas = [
{ name: "Ryu", age: 30, belt: "black", id: 1 },
{ name: "Yoshi", age: 20, belt: "green", id: 2 },
{ name: "Benedict Cumberbatch", age: 43, belt: "Old black", id: 3 }
];

return (
<div className="App">
<h1>My first react app!</h1>
<p>Welcome</p>
<Ninjas ninjas = { ninjas }/>
</div>
);
}

export default App;

[francisseneve]

You are the best! I was struggling learning React but you're React tutoials help me out. Thanks!

[mridulgupta]

Thanks, man!
Following your videos always makes my day and concepts clear ;)
Kudos!

[sergi]

Great tutorials, thank you very much for these.

[nicolaslupo]

You're an awesome teacher! Thank you!

[gokhantaskan]

I've worked with Vue.js for 2 months. In 1 day, I've learned almost everything which I can do with Vue.js. So, they are almost the same, no big difference at all. Vue is just way more lightweight and a bit simpler.

[Jono_]

I was so smug jumping forward doing ninja.id then you put key and I was ooo ok I will listen to the boss!!!!