Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Basics

Well done!

You have completed React Basics!

Sign up for Treehouse Back to Library

Iterating and Rendering with map()

6:19 with Laura Coronel

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up