Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Learn how to iterate over data and render elements in React.
items
array:
const items = [
{
name: "Apples",
quantity: 5
},
{
name: "Bananas",
quantity: 7
},
{
name: "Box of Pasta",
quantity: 1
},
{
name: "Cookies",
quantity: 12
}
]
Resources
Treehouse Courses & Workshops
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's enhance the way
items are used in our app.
0:00
Currently, we have four hardcoded item
components inside the app component.
0:03
If you've built JavaScript applications
before, you may have used loops to iterate
0:09
over an array and generate HTML elements
dynamically that you insert into the DOM.
0:15
In our app, it would be ideal
to have an array of items and
0:20
render an item component for
each item in the array.
0:24
In this video, we'll do exactly that.
0:28
I'll teach you how to iterate over
data to generate a list of elements,
0:30
in our case, item tags.
0:36
First, let's define our items array.
0:37
We'll create a variable named items.
0:40
This array will contain objects,
with each object having a name and
0:46
quantity property.
0:51
I've already prepared an example
with four objects and
0:52
you can find them in the teacher's
notes with this video.
0:56
Now, to get this items
data into our application,
1:00
we need to pass the items array as
a prop to the main app component.
1:03
In the root.render method, I'll add
a prop named initialList to the app tag.
1:08
Then I'll pass the items
array as a value for
1:15
the prop by wrapping the variable
items in curly braces.
1:18
If we open React Dev Tools and
select the app component,
1:22
we can see that it now
accepts an initialList prop,
1:26
which contains an array
with the four item objects.
1:30
So next, to use these props
inside the app function,
1:34
we need to pass it the parameter for
props.
1:38
Now, inside the app component,
we have access to props.initialList.
1:42
Our goal is to iterate over this array and
1:48
return an item component for
each object in the array.
1:51
To do this, we'll use the map method,
1:56
which is an iteration method
available in Javascript.
1:59
If you're unfamiliar with how to use map,
I recommend checking out the Treehouse
2:03
videos mentioned in the teacher's
notes for this video.
2:08
You will likely use map quite
a bit in React to loop over data.
2:11
Remember that every JavaScript
expression written inside JSX
2:16
needs to be placed inside curly braces.
2:21
So below the Grocery List comment,
2:25
we'll use curly braces to allow
JSX to evaluate the map method.
2:27
We'll start by mapping over the items
array by typing props.initialList.map.
2:32
The map method takes a callback
function as an argument,
2:40
which processes each item
in the array one by one and
2:45
returns a new array with
the processed items.
2:49
Our goal is to map each item
object into an item component.
2:53
We'll write the callback
function as an arrow function,
2:58
taking the parameter item to represent the
current item being processed in the array.
3:03
Inside the callback function,
we'll return an item component.
3:09
I'll simply copy one of
the item components and
3:14
paste it inside the callback.
3:18
Here, I'm using an implicit
return which means that I'm
3:20
omitting the return keyword and
curly braces.
3:25
Next, we need to adjust the props
being passed to the item component.
3:28
Instead of passing static values,
3:33
we'll change the value of
the name prop to item.name and
3:36
the value of the quantity
prop to item.quantity.
3:41
These values correspond to the name and
3:45
quantity properties of each item
we're getting from the map method.
3:48
Finally, we can delete the remaining
item tags below this expression and
3:53
save the main.jsx file.
3:58
And in the browser, we can see that
the four items are rendered to the screen.
4:02
If we inspect the app in React DevTools,
we'll find 4 item components,
4:06
each with a different name and
quantity prop.
4:11
In the Elements tab,
4:15
we can see that React has rendered four
divs with the class item in the DOM.
4:16
Excellent, now, let's take
a closer look at what we just did.
4:21
We use the map method to iterate
over the initialList array and
4:26
create an item component for
each item in the array.
4:31
We chose map because it
returns a new array.
4:36
Therefore, what map returns is
a new array of item tags, like so.
4:39
Here, we have an array of four item tags,
each separated by commas.
4:46
I'll comment out our map method and
save the file.
4:51
In the browser, we can see that our app
still renders the four items as before.
4:56
So in React, if you need to iterate over
an array to render multiple components,
5:02
you must use an array method that
returns a new array, such as map.
5:08
If you try to use an array method
that does not return anything,
5:14
like forEach, your components will
not be rendered onto the page.
5:18
Let's change this back to map.
5:23
Now, the header components still
displays 1 as the number of total items.
5:26
This is a quick fix.
5:31
We know that we're getting an array for
props.
5:33
So in the header tag, we can use
the length property on props.initialList
5:36
to determine the number of
item objects in the array.
5:41
By updating the code to
props.initialList.length,
5:45
the header component will
display the correct count.
5:49
In this case, it shows four items.
5:52
That was a quick and simple fix.
5:55
Lastly, we have a warning
in the console from React.
5:58
It says, warning, each child in
a list should have a unique key prop.
6:02
Although this warning doesn't
prevent our app from running,
6:07
it's something we should address and fix.
6:11
In the next video, we'll dive
into why this warning exists and
6:13
explore how to resolve it.
6:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up