How to Loop and Repeat a JSX Element X Number of Times in React

React's use of JSX allows you to write HTML-like code in JavaScript.

Because it is JavaScript, you can use JavaScript to repeat elements in JSX, wheres you couldn't do this normally in HTML.

In this post, we'll learn the easiest way to repeat JSX elements in a loop in React.

How to repeat JSX elements in a loop

Let's say you have an array of objects, and you want to repeat JSX elements for each object in the array.

First, we can define the array:

JAVASCRIPT
const array = [
    { name: "John", age: 20 },
    { name: "Mary", age: 25 },
    { name: "Peter", age: 30 },
];

Then, we can use the map() method to loop through the array and create a JSX element for each object in the array:

JSX
const array = [
    { name: "John", age: 20 },
    { name: "Mary", age: 25 },
    { name: "Peter", age: 30 },
];

const elements = array.map(item => {
    return (
        <div>
            <h1>{item.name}</h1>
            <p>{item.age}</p>
        </div>
    );
});

Finally, we can render the JSX elements by calling it inside using { elements }:

JSX
const array = [
    { name: "John", age: 20 },
    { name: "Mary", age: 25 },
    { name: "Peter", age: 30 },
];

const elements = array.map(item => {
    return (
        <li>
            <h1>{item.name}</h1>
            <p>{item.age}</p>
        </li>
    );
});

const App = () => {
    return (
        <div>
            <h1>Hello World</h1>
            <ul>
                { elements }
            </ul>
        </div>
    );
}

This code results in this HTML:

HTML
<div>
    <h1>Hello World</h1>
    <ul>
        <li>
            <h1>John</h1>
            <p>20</p>
        </li>
        <li>
            <h1>Mary</h1>
            <p>25</p>
        </li>
        <li>
            <h1>Peter</h1>
            <p>30</p>
        </li>
    </ul>
</div>

Here's how you add a key to each JSX element:

JSX
const array = [
    { name: "John", age: 20 },
    { name: "Mary", age: 25 },
    { name: "Peter", age: 30 },
];

const elements = array.map(item => {
    return (
        <li key={item.name}>
            <h1>{item.name}</h1>
            <p>{item.age}</p>
        </li>
    );
});

Conclusion

In this post, we learned how to repeat JSX elements in a loop in React.

Simply use the map() method to loop through an array and create a JSX element for each object in the array.

Thanks for reading!

• Support Us