One of the advantages of React is that you can quickly generate HTML chunks using the JSX template system. Looping and presenting the data is a ubiquitous part of building apps with React. Iterating over an array of objects and rendering the data with JSX is one of the most fundamental and crucial things you need to be able to do before moving on to a real-world project.
When building scalable web apps, you will have to handle JSON responses and display them on a web page. This guide will teach you how to loop over an array of objects and render each item's information in React.
The first step is to fetch data from an external service. For this example, you can use the Random Users API, which will generate a list of random users.
To fetch data from the service, use the browser's native fetch
API. Pass the external URL to the fetch
method and it will return a promise, so you need to chain the then()
methods.
1let users = [];
2fetch(`https://randomuser.me/api/?results=10`)
3 .then((res) => res.json())
4 .then((data) => {
5 console.log(data.results);
6 });
If you do not want to chain the then()
methods, you can use the async-await
syntax. Wrap the fetch call in a function and place the async
keyword before the function definition. Inside the method, use the await
keyword to get the results.
1async function getRandomUsers() {
2 const res = await fetch(`https://randomuser.me/api/?results=10`);
3 const data = await res.json();
4 return data.results;
5}
More details on the fetch
API are discussed in this guide.
Now, create a React component that will fetch random users when the component is mounted. Ideally, the fetch call should be placed in the componentDidMount
lifecycle method so the results are ready once the component gets mounted on the page. Once you retrieve the results from fetch, store the user list in the component's state.
1class UserList extends React.Component {
2 constructor(props) {
3 super(props);
4
5 this.state = {
6 users: [],
7 };
8
9 this.getRandomUsers = this.getRandomUsers.bind(this);
10 }
11
12 async getRandomUsers() {
13 const res = await fetch(`https://randomuser.me/api/?results=10`);
14 const data = await res.json();
15 return data.results;
16 }
17
18 async componentDidMount() {
19 const users = await this.getRandomUsers();
20 this.setState({ users });
21 }
22
23 render() {
24 // ...
25 }
26}
Create a component that will render an individual user item.
1const User = ({ name, avatar, email }) => (
2 <div>
3 <img src={avatar} />
4 <div>
5 <p>{name}</p>
6 <p>{email}</p>
7 </div>
8 </div>
9);
Next, iterate over the data using the map()
or forEach()
methods or using loops.
map()
MethodThe map()
method is the most commonly used function to iterate over an array of data in JSX. You can attach the map()
method to the array and pass a callback function that gets called for each iteration. When rendering the User
component, pass a unique value to the key
prop. The key
prop helps React keep track of JSX elements and identify any changes in the array.
1class UserList extends React.Component {
2 constructor(props) {
3 super(props);
4
5 this.state = {
6 users: [],
7 };
8
9 // ...
10 }
11
12 // ...
13
14 render() {
15 return (
16 <div>
17 {this.state.users.map((user) => (
18 <User
19 name={`${user.name.first} ${user.name.last}`}
20 avatar={user.picture.thumbnail}
21 email={user.email}
22 key={user.id.value}
23 />
24 ))}
25 </div>
26 );
27 }
28}
for
LoopAlternatively, you can also use regular loops like the for
loop to render JSX elements.
Create a separate function called renderUsers()
in the component. Initialize an empty array to which you push the JSX element for each user.
Run the for
loop from index 0 to the length of the user state array.
1for (let i = 0; i < this.state.users.length; i++) {
2 // ...
3}
Then, inside the loop body, access the current user as follows:
1let name = `${this.state.users[i].name.first} ${this.state.users[i].name.last}`;
2let avatar = this.state.users[i].picture.thumbnail;
3let email = this.state.users[i].email;
Let's put all this together in the component. Inside the render()
method, call the renderUser()
method to display the list of users.
1class UserList extends React.Component {
2 constructor(props) {
3 super(props);
4
5 this.state = {
6 users: [],
7 };
8
9 this.renderUsers = this.renderUsers.bind(this);
10
11 // ...
12 }
13
14 function renderUsers() {
15 const userList = [];
16 for(let i = 0; i < this.state.users.length; i++) {
17 let name = `${this.state.users[i].name.first} ${this.state.users[i].name.last}`;
18 let avatar = this.state.users[i].picture.thumbnail;
19 let email = this.state.users[i].email;
20 let key = this.state.users[i].id.value;
21 userList.push(<User name={name} avatar={avatar} email={email} key={key}/>);
22 }
23
24 return userList;
25 }
26
27 // ...
28
29 render() {
30 return <div>{this.renderUsers()}</div>;
31 }
32}
As you can see, the renderUsers()
method is hard to read; writing such code is generally avoided as it is difficult to debug and maintain.
forEach()
MethodTo make the renderUsers()
method more readable, use the forEach
method, as shown below. Its usage is similar to the map()
method, but the forEach()
method does not return anything. This makes it unusable directly inside the render()
method, as you need an array to store the individual JSX elements.
1function renderUsers() {
2 const userList = [];
3 this.state.users.forEach((user) => {
4 let name = `${user.name.first} ${user.name.last}`;
5 let avatar = user.picture.thumbnail;
6 let email = user.email;
7 let key = user.id.value;
8 userList.push(<User name={name} avatar={avatar} email={email} key={key} />);
9 });
10
11 return userList;
12}
As a developer, you must understand your use case and curate solutions according to your requirements. In most cases, the map()
method gets the job done, but it is good to know additional ways of looping over an array of JSON. Also, don't forget to add a key
prop unique to the JSX element to help with performance.