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
– Nenad Vracar, Commented Nov 22, 2017 at 19:29
"Use map instead forEach" that doesn't answer the question, however. WHY doesn't it work. — LarryBud
– LarryBud, Commented Feb 12, 2021 at 18:39

Ajay Gaur · Accepted Answer · 2018-07-09 11:02:53Z

46

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 9, 2018 at 11:02

answered Nov 22, 2017 at 19:31

Ajay Gaur

5,2807 gold badges41 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gonzalo Pincheira Arancibia · Accepted Answer · 2017-11-22 19:31:03Z

13

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, 2017 at 19:31

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

1 Comment

Nithur Over a year ago

I want to display items in the UI, can I use forEach for that?

redhedjim · Accepted Answer · 2017-11-22 19:33:08Z

6

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.

answered Nov 22, 2017 at 19:33

redhedjim

1061 silver badge6 bronze badges

Comments

maioman · Accepted Answer · 2017-11-22 19:31:54Z

3

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.

answered Nov 22, 2017 at 19:31

maioman

18.8k4 gold badges39 silver badges46 bronze badges

Comments

Hinesh Miyani · Accepted Answer · 2021-07-01 15:02:33Z

2

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()

answered Jul 1, 2021 at 15:02

Hinesh Miyani

211 bronze badge

Comments

Jeremiah Dunphy · Accepted Answer · 2023-08-31 00:28:06Z

0

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!

answered Aug 31, 2023 at 0:28

Jeremiah Dunphy

11 bronze badge

1 Comment

john k Over a year ago

hes not trying to transform elements of an array, hes trying to loop through them. So by your logic he should use ForEach

Collectives™ on Stack Overflow

Reactjs map works but forEach doesn't

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related