Loop Via An Array in JSX: The 10 Days of React JS (Day 6)

by birtanpublished on July 3, 2020


hello everyone in this lesson we're

going to learn how to programmatically

loop through a collection of data within

the context of JSX in order to render

one component for each item in the

collection let's dive right in okay so

in order to save a bunch of meaningless

typing that has no educational value

I've already created this new raw

JavaScript array of pet data so right

now I want you to pause this video and

find the link or resource for this

lesson it should be named something like

reference copy and paste or copy and

paste code or copy and paste data

anyways you'll find this link and then

just copy this code in the JavaScript

column into your clipboard so just

select this entire constant x equals

square brackets just copy that and then

back within the code pen that we've been

working on throughout all of these

lessons up at the very very top even up

above our our app function just create a

new line at the top and paste in your

clipboard just like this now right away

I want to say that this is not the ideal

or proper way to store data in memory

with react don't worry in our very next

lesson we'll learn about the react dish

or component way to store app data for

now in this lesson the only thing we're

learning about or worrying about is how

to loop through an array of data and

render a component once for each of the

items now yes there are only five pets

in this array but you can use your

imagination in picture there could be

500 pets in the array the point is we

need a way to automatically or

programmatically loop through this

collection of items and render a pet

component once for each item right

because we don't want to have to type

that out manually for each pet so the

question becomes how can we make that

happen programmatically within the

context of JSX here well first let's


about how JSX works so check this out

you don't need to type this part in with

me but at the beginning of our unordered

list within this JSX we could just

actually include curly brackets to

include a bit of JavaScript and then in

JavaScript to create an array you can

just have square brackets and then

inside this array I could have one list

item right that says hello and then

right after that list item I could have

a comma right just like an array and

then have another list item and it could

say hey now if we check the preview area

we see two list items right hello and

hey and we didn't have to do anything to

convert this array into a string because

it's already JavaScript that's the

beauty of JSX it's not like at the end

of defining this array we had to say dot

join to convert it into a string the

point that I'm trying to make here is

that within JSX we are free to include

javascript within curly brackets and

then you can literally just include an

array right an array of elements or an

array of components so with that in mind

now I really want you to follow along

and type this out with me within our

unordered list I want you to hollow out

everything we have so including the

three pets that we've already included

here delete all of those and that array

test hello hey code I just typed in so

now we just have an empty unordered list

now check this out within there

let's have curly brackets to include a

bit of JavaScript and then we know that

our collection of data right they could

potentially have a hundred pets or 500

pets in it it's in a constant variable

named pets so within our curly brackets

in the unordered list we can just say

pets and that's an array just the

JavaScript array and in JavaScript every

array has access to a method named map

so pets dot

and parentheses to call map now this

specific code that I'm highlighting

right now this has nothing to do with

react this is sort of getting into the

beauty of

react there's not tons and tons to learn

about react a lot of it is just your

javascript skills being applied in

general what I'm getting at is we just

want to return an array of elements or

components and in JavaScript the map

method works like this essentially in

these parentheses you give it a function

and then it's going to call whatever

function you give it once for each item

in this collection of data if that

doesn't make perfect sense right now

that's okay we're going to walk through

this step-by-step right now so within

the parentheses of map I want you to

create a function with me so function

parentheses after those parentheses

curly brackets inside those curly

brackets we can drop down don't worry in

just a few minutes we can convert this

into an es6 arrow function so the code

seems a bit more clean or minimalist but

for now I want to actually really spell

it out okay so this function is going to

get called once for each item in our

collection or array and the idea is that

map is going to assemble or generate a

new array here's how it works within the

body of this function whatever we return

is what's going to get added on to a

brand-new array that map returns if that

doesn't make sense that's okay I think

this will make things clearer so this

function is going to get called once for

each item so within these parentheses we

want to add a parameter we could name it

anything but let's just call it lower

case pet okay now within the body of

this function we can access the current

pet that has been looped to via this

parameter name of lower case pet this is

where things might start to make sense

what we want to return is an upper case

pet component right just like before and

we know that we want to give this props

so for example we would give it a prop

of name and we would set that to equal

well we don't actually need quotes here

because we're not going to actually type

in a new string of text so get rid of

the quotes just name equals and then to

include JavaScript it's curly brackets

and we would just say pet lowercase pet


current item in the array that's been

looped to dot name and then we would

want to give a prop of species for this

component so species equals curly

brackets lower case pet species

let's give it a final prop of age so age

equals curly brackets lower case pet dot

age and then finally just for internal

react performance reasons we do want to

include a prop named key and let's set

this to equal curly brackets pet ID if

you're wondering what ideas you'll

notice in our array each pet has a

unique ID value and I just typed in

random numbers the ideas that react has

this unique identifier or key to track

each component or each instance of the

component okay now before we worry about

cleaning this code up to use modern es6

syntax let's check out our preview area

perfect we see all five pets this means

that even if our array of data contained

5,000 pets we just wrote this one little

piece of code and the entire collection

is going to be converted into our pet

components so ultimately this lesson

didn't really have much to do with react

inherently however it did begin to show

us the true nature and usefulness of JSX

at this point let's go ahead and convert

this traditional anonymous function into

a more modern es6 aero function if you

have no idea what that means that's okay

essentially it's just a more modern

JavaScript syntax that will make our

code look a bit more clean or minimalist

and again this syntax difference doesn't

have anything to do with react this is

just general JavaScript knowledge okay

but go ahead and do this with me so we

can actually get rid of the word

function here and then since we have

precisely one parameter we don't need

the parentheses around it so you can get

rid of the opening parenthesis right

before pet and the closing parenthesis

right after pet okay now right after

that parameter

to include the arrow symbol which is

just the equal sign and the greater than

symbol squished together like this okay

now this code also does not need to sit

on its own line so we can get rid of

this white space right before return

just backspace up so it sits on the same

line of code let's do the same thing

here all right we don't need this line

break in white space here so right

before this closing curly bracket just

delete that so it's on the same line now

if the body of our function only

contains one statement or one line of

code we actually don't need the curly

brackets around the body of the function

so right after the arrow symbol we do

not need this opening curly bracket so

we can get rid of that and then we also

don't need this closing curly bracket

right after the end of our pet component

right here so we can delete that okay

and then if the body of your function

sits on the same line like this you

actually don't need to include the word

return it's just implied or assumed so

we can get rid of return cool so that's

a lot cleaner and now this entire

process of programmatically looping

through an array can fit on a single

line of code and if we really stop and

look at the code it's very intuitive you

can glance at this and immediately see

what's going on and that's actually

going to bring this lesson to a close in

our next lesson we're going to learn

about perhaps the single most important

topic in all of react it's something

called state state is how we store the

data of our app in memory with react

state really brings us back to the

defining characteristic or the most

impressive part of react and that is

that as our state data changes react

automatically re-renders our interface

for us without us needing to manually

call render again but we are currently

doing at the bottom of this app right

remember we set a JavaScript interval

that's going to fire once every second

or every thousand milliseconds and then

we are manually calling react Dom dot

render and re rendering our application

this type of setup works but it's not

the typical or standard or ideal way

setting up react as we'll see in our

next lesson we don't need to worry about

calling render more than once we can

just render our application once and

then if we ever update its State react

is smart enough to know to re-render

again on its own if that doesn't make

sense that's okay

state is a big topic I wouldn't expect

you to understand it during my last 30

second rainbow that's why we're going to

dedicate the entire next lesson to state

this should be a big moment in your

react journey excited to jump through

this with you

so let's keep things rolling I'll see

you then to get immediate and lifetime

access to the full 15 hour video course

you can find a heavily discounted coupon

link in the description for this video

thank you so much for watching and take



Be the first to comment “Loop Via An Array in JSX: The 10 Days of React JS (Day 6)”

Your email address will not be published.

There are no comments yet.