React loop array/object inside jsx render with examples


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

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

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

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

Let’s create EmployeeComponent.js in react

This component reads the object from react props and displays to 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 Parent component, List of employee are iterated in React rdx using different syntax

Iterate array loop inside react jsx

react state object is initialized with array of employee data

In render method, here are sequence of steps

  • Basic for loop syntax is used to iterate 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 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, component array is placed inside div element.

Here is 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 inbuilt function in array in JavaScript, map iterate the each element of an array and returns new array. These 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 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 final array.

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

Similar Posts