10 Days of React Challenges (Beginner): Loop Over and Display Data with JSX

Celý článek

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.

The Challenge: Loop Over an Array

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

Starter Code

Fork this CodeSandbox to get started: https://codesandbox.io/s/r5vmxy9l1o

Here's what the final page looks like:

Fork this CodeSandbox to get started https://codesandbox.io/s/o41ry580w9

Solution: Loop Over an Array with JSX

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

// 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"
  }
];

Loop Over the Array

.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:

// 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>
      <ScotchInfobar />
    </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.

Conclusion

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.

Have you got questions, suggestions, and comments? We'll love to see them in the comment section. You can find other challenges here and join the live streams here. Happy keyboard slapping!