10 React Challenges for Beginners - Lesson #3

React Challenge: Loop Over and Display Data with JSX

Data comes in all shapes and sizes. In JavaScript, an array is how we hold sets of data. For the majority of our site content, we use an array of objects.

Looping through and showing data from an array is an essential skill.

In this React challenge, we'll loop through array data and display information from each item.

For this challenge, you have an array of users. Loop over those users using JavaScript's .map().

Techniques Used: At the end of this challenge, you will be able to

  • Use the .map() method to render data.
  • Parse and display data in an array of objects

Fork this CodeSandbox to see the starter code.

Here's what the final page looks like:

In our boilerplate CodeSandbox, we have an array of users from src/users-data.js:

jsx
// Data export
export default [
  {
    name: "😃 William",
    location: "🏘️ Lagos",
    car: "🚘 Honda"
  },
  {
    name: "😃 Chris",
    location: "🏘️ Moon",
    car: "🚘 Tesla"
  },
  {
    name: " 😃 Rose",
    location: "🏘️ Venice",
    car: "🚘 Pagani"
  },
  {
    name: "😃 Mike",
    location: "🏘️ Milan",
    car: "🚘 Rolls Royce"
  },
  {
    name: "😃 Liz",
    location: "🏘️ Beirut",
    car: "🚘 Mercedes"
  }
];

.map() in JavaScript iterates through an array and calls a specified function for each of the items. Components in JSX are JS functions. For each object in the array, a block of JSX elements is returned.

Also, data from the object is passed to each block using the JSX handlebars-like curly brackets.

In the App() component of src/index.js iterate over the imported data using .map() with:

jsx
// Import dependencies
// import ...

// Import users from exported module
import users from "./users-data";

/*
 * Our React component where we display data
 */
function App() {
  return (
    <div className="App">
      <div className="page-deets">
        <h2>Iterate over Array and display data</h2>
      </div>

      {/* Iterate over imported array in userData */}
      <div className="users">
        {users.map((user, index) => (
          <div key={index}>
            <h3>{user.name}</h3>
            <p>{user.location}</p>
            <p>{user.car}</p>
          </div>
        ))}
      </div>
      
    </div>
  );
}

Do you notice the key attribute? React requires a unique identifier for each element in the array. This key attribute could be a unique ID, or something unique to each object. Here, we use the index position of each object (that's unique too!).

Here's what the final page looks like:

You can find the completed CodeSandbox here.

In this challenge, we built out a page using data from a provided array of objects. Iterating through provided data is a necessary process when building out rich, data-centric user interfaces in React.

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)