Using the forEach() method in React

In this article, we will give you some knowledge about using the forEach() method in React. Let’s read it to understand this method better.

Using the forEach() method in React

The forEach() method is a built-in array method provided by Javascript. This function will, in turn, pass the elements of the array to a previously provided function, which will process the array gate elements as an input parameter.

Syntax:

arr.forEach(function callback(currentValue, index, array) {

    // your iterator

}[, thisArg]);

Parameters:

• callback: is a function to perform with each element of the array.
• currentValue: the current element being processed of the array.
• index: the index of the currently processed element of the array.
• array: the current array calling the forEach function.
• thisArg: value used as this, is the reference to the object when executing the callback function (If thisArg is not specified, the default is undefined).

Use forEach() to render elements

We will come to React‘s standard behavior, which is to render an array to the screen. To use forEach to render elements from an Array, we must define an empty listener array to hold the previous elements like the code below.

Code:

import React from "react";

const App = () => {
  let users = [
    { id: 1, name: "Tom" },
    { id: 2, name: "Jim" },
    { id: 3, name: "Han" },
  ];
  var listUser = [];
  users.forEach((user, index) => {
    listUser.push(<li key={index}>{user.name}</li>);
  });
  return (
    <>
      <h2>Using the forEach() method in React | LearnShareIT</h2>
      <hr />
      <ul>{listUser}</ul>
    </>
  );
};
 
export default App;

Output:

Because forEach doesn’t support rendering elements like the map() method, we have to use an empty array to hold each piece of HTML we generate. Then print the whole list of <li> tags to the screen for the user.

Use forEach() to calculate

In this usage, we will use forEach to calculate the values. For example, you have an array of numbers and must calculate the sum of all the array elements. We can use the forEach method to iterate over every number element inside the numbers array.

Code:

import React from "react";

const App = () => {
  let numbers = [1, 2, 3, 4, 5];
  var result = 0;
  numbers.forEach((number, index) => {
    result += number;
  });
  return (
    <>
      <h2>Using the forEach() method in React | LearnShareIT</h2>
      <hr />
      <h3>The sum of numbers array = {result}</h3>
    </>
  );
};

export default App;

Output:

With the result variable to hold the sum of the array’s values, we’ll iterate over each element and add them to the result variable to get a complete sum. Finally, we render this value to the screen for the user. Wish you success with these methods.

Summary

The article taught us how to use the forEach() method in React and how it works. You already know how to render elements to the screen with the forEach() method or use it to calculate values. Wish you a good day!

Maybe you are interested:

• Using the map() method with index in React
• Using the find() method in React
• Using the substring() method in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs