How to use forEach Loop in React

The beauty of React, and other front-end libraries, is that they allow you to create dynamic web pages where you're only focused on the data that powers them.

For example, when you want to render a list on the page, you can just create an array of data and then use the map function to render each item in the array.

In this post, we'll learn how to use the forEach function to loop through an array of data and then render it on the page.

How to use the forEach function

To start off, let's create a simple array of data that we want to render on the page.

JAVASCRIPT
const names = ["John", "Jane", "Mary"];

Now in plain JavaScript, we can use the forEach function to loop through the array and then log each item.

JAVASCRIPT
names.forEach(name => console.log(name));

JAVASCRIPT
John
Jane
Mary

Thankfully, we can do something very similar in React as well:

JSX
import React from "react";

const App = () => {
    const names = ["John", "Jane", "Mary"];

    const list = [];

    names.forEach(name => {
        list.push(<li>{name}</li>);
    });

    return (
        <ul>
            {list}
        </ul>
    );
};

export default App;

This works because we are defining a new array called list and then pushing each item as JSX into the array.

Then, we can just render the array on the page.

Conclusion

In this post, we learned how to use the forEach function to loop through an array of data and then render it on the page.

This is a very common pattern in React, and it's very easy to do, simply create a new array and then push each item into the array so the entire array can be rendered on the page.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share