{

How to iterate array of object inside jsx render with examples in React


In this short tutorial, You learn how to iterate an array or object in the JSX render function.

In react components, the Render method returns the single element renders to the page.

Sometimes, we want to display child components with for loop. we can use a loop inside render JS. however, is It is tricky to iterate and display child components

This article explains about an employee’s array data is stored in react state, Display these in child component using react props with iteration in the parent component.

Let’s create EmployeeComponent.js in react

This component reads the object from react props and displays it to a page with ul/li elements. Data received as an object, converted to individual fields using es6 object destruction syntax.

import React, { Component } from 'react';
import "../index.css"
export default class EmployeeComponent extends Component {

    render() {
        const { id, name, salary } = this.props.data;
        return <div>
            <ul>
                <li>Id:{id}</li>
                <li>Name:{name}</li>
                <li>Salary:{salary}</li>
            </ul>

        </div>

    }
}

In the Parent component, a List of employee are iterated in React JSX using different syntax

Iterate array loop inside react jsx

First, react state object is initialized with an array of employee data.

In the render method, here are a sequence of steps

  • Basic for loop syntax is used to iterate the array, You can check more about for loop
  • Constructed an array of employee components child with data
  • Please note that each child component is assigned with the unique key attribute, if you don’t pass this, you get an error like Each child in a list should have a unique “key” prop
  • finally, the component array is placed inside a div element.

Here is the complete example code:

import React, { Component } from 'react';
import EmployeeComponent from './EmployeeComponent';
import TextControl from './TextControl';

export default class EmployeeListComponent extends Component {
    constructor() {
        super();
        this.state = {
            employees: [
                {
                    "id": "1",
                    "name": "Franc",
                    "salary": "5000"
                },
                {
                    "id": "11",
                    "name": "John",
                    "salary": "6000",
                }
            ]
        };
    }

    render() {
        let list = [];
        for (var i = 0; i < this.state.employees.length; i++) {
            list.push(<EmployeeComponent key={i} data={this.state.employees[i]} ></EmployeeComponent >);
        }

        return <div>{list}</div>;
    }
}

Output:

Iterate array objects inside react render jsx method examples

You can also rewrite above using map method in react jsx

map is an inbuilt function in a JavaScript array, and it iterates each element of an array and returns a new array. This method has a call-back called for each element during iteration. It uses es6 arrow function for an call-back

with map, code as below

render() {
        let list = [];
        this.state.employees.map((employee, index) => {
            list.push(<EmployeeComponent key={index} data={employee} ></EmployeeComponent >);
        });
        return <div>{list}</div>;
}

Another way is to rewrite using for-of syntax to iterate and render in react

for-of loop is new way to iterate objects.

render() {

        var list = [];
        for (const [index, employee] of this.state.employees.entries()) {
            list.push(<EmployeeComponent key={index} data={employee} ></EmployeeComponent >);
        }
        return <div>{list}</div>;
    }

Apart from the above approaches, you can different ways to iterate in javascript

Conclusion

As react render returns one element, before returning list, construct list using different approaches mentioned above and return a final array.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React