Reactjs map works but forEach doesn't

Question

I'm struggling to understand the difference between forEach and map. In the following render function if the 'forEach' is replaced with 'map' it works. I don't understand why it doesn't work with the 'forEach'. Both {item.id} and {item.text} are present with both methods. So, why are the props for 'TodoItem' not being set when using 'forEach' ?

render() {    
  return(

     <ul>
        {this.props.items.forEach(function(item) {

           return (
              <TodoItem id={item.id} text={item.text} />)
        })} 
     </ul>
  );
}

So if 'forEach' doesn't return anything how come this doesn't work either:

render() {    
  return(

     <ul>
        {this.props.items.forEach(function(item) {               

              <TodoItem id={item.id} text={item.text} />
        })} 
     </ul>
  );
}

Map returns new array of modified elements and forEach just iterates through array and doesn't return anything. — Nenad Vracar, Nov 22 '17 at 19:29
"Use map instead forEach" that doesn't answer the question, however. WHY doesn't it work. — LarryBud, Feb 12 '21 at 18:39

Ajay Gaur · Accepted Answer · 2018-07-09T11:02:53.380

43

The map function returns an array of items and forEach just loop over them. To make this code work use :

render() {    
  const items = [];
  this.props.items
    .forEach(item => items.push(
                       <li>
                          <TodoItem id={item.id} key={item.id} text={item.text} />
                       </li>
                     ))

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

edited Jul 09 '18 at 11:02

answered Nov 22 '17 at 19:31

Ajay Gaur

5,140
6
38
60

score 12 · Answer 2 · answered Nov 22 '17 at 19:31

12

Try this simple example for understand why forEach doesn't work in this context:

[1,2,3].forEach((n)=> n); => returns undefined

[1,2,3].map((n)=> n); => returns [1,2,3]

answered Nov 22 '17 at 19:31

Gonzalo Pincheira Arancibia

3,483
1
23
42

I want to display items in the UI, can I use forEach for that? – Nithur Jul 21 '22 at 09:11

score 5 · Answer 3 · answered Nov 22 '17 at 19:33

As @Nenad Vracar mentioned map will actually return stuff. If you wanted to do somethings to another array, object or piece of code you could use forEach. But since you want to return something that ends up being shown on the DOM. Use map.

Also, don't forget to return whatever you're mapping. It's a common mistake because you don't need to use the return for forEach.

score 3 · Answer 4 · answered Nov 22 '17 at 19:31

Basically map returns an array while forEach returns nothing,

in jsx/react context you need to return a list of components/node-tags that the parser will transform in nodes both in the real and virtual dom;

working by side-effect like forEach does you won't have anything to parse.

score 2 · Answer 5 · answered Jul 01 '21 at 15:02

forEach() just loop through the elements. It's throwing away return values and always returns undefined. The result of this method does not give us an output.

map() loop through the elements allocates memory and stores return values by iterating the main array.

var numbers = [2, 3, 5, 7];

var forEachNum = numbers.forEach(function(number) {
  return number
})
console.log(forEachNum)
//output undefined

var mapNum = numbers.map(function(number) {
  return number
})
console.log(mapNum)
//output [2,3,5,7]

//map() is faster than forEach()

score 0 · Answer 6 · answered Aug 31 '23 at 00:28

Map returns a new Array, while ForEach returns undefined.

Here are some differences between the two methods.

Map allocates memory and stores return values, while forEach throws away return values and always returns undefined.

Map is chainable, but forEach isn't. This means that you can use other methods after map, but not after forEach.

Map is used to transform the elements of an array, while forEach is used to loop through the elements of an array.

Map returns an array of values, while forEach returns undefined.

Hopefully this helps!

Reactjs map works but forEach doesn't

6 Answers6

Linked

Related