Can I use .forEach() to create a list of JSX elements?

Question

Can I use .forEach() to create a list of JSX elements?

Answer

We can use .forEach() to create a list of JSX elements from an array as long as we are using .forEach() from outside a JSX expression as .forEach() does not evaluate to a value like .map() does. That said, .forEach() takes a little more code to do the same thing that .map() can do.

For example:
Using .forEach():

const myArr = ['one', 'two', 'three'];

const myArrMadeFromForEach = []; // we create a new array which will evaluate to a value when we inject it into a JSX expression

myArr.forEach((item, i) => myArrMadeFromForEach.push(<li key={item+i}>{item}</li>)); // we push a JSX element containing a value to our 'myArrMadeFromForEach' because `.forEach()` does not return any value, nor does it mutate the array on which it is called

const myList = (
  <ul>{myArrMadeFromForEach}</ul> // `myArrMadeFromForEach` will evaluate to an array of `<li>` elements
)

ReactDOM.render(myList, document.getElementById('app'));

compared to using .map():

import React from 'react';
import ReactDOM from 'react-dom';

const myArr = ['one', 'two', 'three'];

const myArrCreatedFromMap = myArr.map((item, i) => (<li key={item + i}>{item}</li>)); // `.map()` creates/returns a new array from calling a function on every element in the array it's called on

const myList = (
  <ul>{myArrCreatedFromMap}</ul> // `myArrCreatedFromMap` will evaluate to a list of `<li>` elements
)

ReactDOM.render(myList, document.getElementById('app'));

we can also use .map() inline without setting the return value to a variable:

import React from 'react';
import ReactDOM from 'react-dom';

const myArr = ['one', 'two', 'three'];

const myList = (
  <ul>{myArr.map((item, i) => <li key={item + i}>{item}</li>)}</ul> // `.map()` creates/returns a new array from calling a function on every element in the array it's called on
)

ReactDOM.render(myList, document.getElementById('app'));
9 Likes

Imperative VS Declarative