declare

Rendering Arrays in React.js - Part 13



Sharing buttons:

so in yesterday's video we grabbed a

random user from this API and displayed

it and react but we are only getting one

user back what happens if we get

multiple users now for this API if you

do question mark and then say results

and then the number you want so let's

say five it'll give you that many random

people back so if I did this query right

here how would I render five people and

reacts basically how do you handle a

raise of data and react so I'm gonna

copy this URL and I'm gonna paste it in

and my component did mount here and if

we take a look nothing's gonna change in

our reactor application yet because

right now we're taking the first result

and that's what we're storing in our

state so instead of having a single

person I'm now going to call this people

and people is now gonna be an array so

that I first gonna have array with no

items in it and then we're gonna update

this state by saying data that results

so now we have an array of people that

we're updating with the state now here

you'll see this does state dot person we

now need to change it to people so if we

don't get any people back for some

reason so if there's no people in the

length of our array then we want to do

that now down here we are displaying a

person right so how do we display this

stuff for every single person well we

can do curly braces here and we can say

this state dot people dot map this

allows us to go person by person and

render the data that we want for that

person so here I'm gonna say person and

then I'm going to say arrow so this

we're creating a function inside of this

map so this is the variable person and

then I'm going to actually render some

JSX here so now I can move this inside

of here

now you'll notice right here I have four

tags that are all on the same level so

you want to make sure you have a route

tag so I'm going to put a div around all

of them and then give this a safe so now

instead of this dot state type person

we're going to use the person right here

so we can just remove this and have

person there and

and have person there and now give this

a save and now we're displaying each

user or each person that we get here

so we're mapping through each people or

the array of people that we get and for

each person we're rendering this JSX

right here

so we have a title first name last name

and a picture of that person now notice

we get an error in the console right

here and it talks about this key and

that we need to have a unique key so

whenever you map over an array like this

you need to or whenever you're

displaying an array of data back and JSX

you're gonna need to pass a special key

prop to the root so this is the root

component or root element and all these

are inside of it right

so in this root one you need to pass a

unique key so a unique key here just

means a unique string so if we go back

to our data of the API it gives us we

can see we have a login and a UUID so

that's gonna be unique so we could say

person dot log n dot UUID

and give it safe so now we're using that

random UID that the user has so it's

gonna be unique for that person and now

we're see we can render all these people

and we don't get any problems now

whenever you're mapping over data you

don't always have a UUID that you can

use as the key and this key is just a

string and if I'm gonna say some person

here's my key we're gonna have a problem

because all these people are gonna have

the same key which is some person and

even tells us that two children with the

same key the some person so we can avoid

that by using the index of the map so

this is some person - this is a string

template that I'm using here so in

JavaScript you can use string templates

by using backticks and then in dollar

sign and in curly braces and then I'm

gonna say I and now this is going to be

some person 0 some person 1 and so on

over each item now you do not want to

use this very often this is pretty much

a last resort using the index of the

array this is not very good to use most

of the time

and if you ever have to delete items in

your list you're gonna have problems so

whenever you can use a unique u u u ID

or unique ID that either the api you're

fetching data from or the data

represents and it doesn't just need to

be some ID we could use like for example

the person's last name and first name

and we hope that's unique so we can say

person that named up first plus person

dot name dot last all you need is some

key that corresponds that user in some

way and that is how you display array

data and react you map over the elements

now there's one other pretty much the

same way but a little different way you

can move map up here so I could say

people JSX

and I could just move the mapping

happens up here and then I could just

render my people

so the difference with this one I'm now

storing a mapping over the only

difference is now I'm storing it in a

variable and I'm now rendering that

variable down here so that's another way

you can do it and you can also instead

of map if you want to do a for loop or a

for each loop so I could say Const

people JSX is equal to an array and I

could say this dot state dot people dot

and why don't we just comment copy this

and I'm gonna comment this out because

we'll keep it for later and now I'm

gonna say for each so what for each does

is we go through every single item but

instead of returning it we're pretty

much is looping through the items so now

I can say make this a function by adding

curly braces there and I can say people

dot J's x dot push so now we're looping

through these people here's our function

right here and our function it does one

thing per person it just pushes some JSX

so we have an array of JSX

and then we're displaying this array of

GS X so those are some different ways

that you can actually generate the array

of data that you want to render

personally my favorite method is the

first one that I showed you so I'm just

gonna comment that out and that's just

putting the map directly in there so

this is what you'll see me use most

often than I prefer

but again it depends on the situation

you're in the other methods might make

more sense so it's good that you know

about them that's it for doing this

video guys thanks for watching

you