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

    Currently, we have four hardcoded item components inside the app component. 0:00
    If you've built JavaScript applications before, you may have used loops to iterate 0:00
    over an array and generate HTML elements dynamically that you insert into the DOM. 0:06
    In our app, it would be ideal to have an array of items and 0:11
    render an item component for each item in the array. 0:15
    In this video, we'll do exactly that. 0:19
    I'll teach you how to iterate over data to generate a list of elements, 0:21
    in our case, item tags. 0:27
    First, let's define our items array. 0:28

    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