Before trying to master React, you should know all important JavaScript methods. Map(), filter(), forEach() are all very useful methods for creating React elements. Most often React developers use map() to modify every item in the array, and create a new array of modified items. This is not always applicable though.
Sometimes we need to use the forEach() method, which applies a callback function to every item in the array. However, unlike map(), forEach() does not return anything. It only has side effects, not a return value. Because it does not return any values, you can not use the forEach() method within the JSX code.
You can, however, create a new array of modified values. In the callback function of the forEach() function you can use the push() method to manually add each item in the modified array. JSX is like a normal JavaScript code. So you can use values in the array as contents to create new React elements or components and add them into a new array. Then in JSX, you can reference the array that contains newly created components.
With forEach() method, you need to do something with values after the callback function is applied. If you do not push() or even console.log() the values, then they will disappear. forEach does not change the array itself. It only takes items in the array and applies a callback function.
forEach() vs map()
The main difference is that forEach is primarily used for its side effects. The callback function passed to forEach is primarily used for side effect. Map() on the other hand applies the callback function to every item and creates a new array composed of modified elements.
JSX allows you to embed JavaScript expressions into the structure of your app. However, you can not write JS code on multiple lines. So you can’t create a new array value and manually push elements into the array.
If you’re going to write a JavaScript expression inside JSX, it needs to be a single expression. Map() meets this condition, because it returns a new array of modified values. JSX will display the returned array. Because forEach() does not return anything, the same can not be said for this method.
For loop instead of forEach()
You can think of forEach() as a function-based alternative to the for loop. It works exactly the same as the for loop. The syntax of the for loop is more convoluted. However, beginner JavaScript programmers may be just as confused with the callback function.
Personally, I like forEach() and its callback function approach. The for loop is far too convoluted for my tastes. Instead of setting index and keeping track of it, I prefer to create a function that automatically applies the callback function on every element.
Both forEach and for loop require multiple lines of code to generate a new value. For this reason, you can not use them to create elements directly in the JSX. For example, if you have a chat window, and an array of chat messages, you can render messages for every item in the array. React allows you to improve chat’s UX. For example, scroll to bottom of the chat every time user enters a new message. However, you can use both to create new arrays outside of JSX and then reference those values within JSX.