Why does Javascript map() render my feature where forEach() didn't? Using React with NextJS

Question

I had an issue where my feature wasn't rendering because I don't think React understood the state was changing. After changing the forEach() to map(), the feature rendered as expected.

Feature will take user's subscriptions from an API then render as list. This is the final working version.

...
export default function MyComp() {
  const [userSubIds, setUserSubIds] = useState()

  useEffect(() => {
    getSubs().then(p => setUserSubIds(p))
  }, [])

  return (
    <>
    {
      userSubIds?.map(subId => {
        <ListItem>
          {subId.data}
        </ListItem>
      })
    }
    </>
  )

Previously I had used forEach(). This did not return any error nor any feature on the web page.

...
      userSubIds?.forEach(subId => {
        <ListItem>
          {subId.data}
        </ListItem>
      })
...

From reading the docs, forEach() always returns undefined and map() returns a new array. But what I'm missing in knowledge is why this matters for rendering?

Neither one returns anything here, although `forEach` is clearly inappropriate because of the fact that it returns undef, which tells JSX not to render anything. If you're using `map` with brackets, use `return`, or change the brackets to `()`s to make it return the result of an expression (invoking `React.createElement` via JSX syntactical sugar in this case). I'm surprised your "final working version" works as you claim. — ggorlen, Jul 16 '22 at 23:41
As you have stated, `forEach` returns `undefied`, so there is nothing to render. — tromgy, Jul 16 '22 at 23:45
and [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) — pilchard, Jul 16 '22 at 23:49

Omkar Kulkarni · Accepted Answer · 2022-07-16T23:47:12.447

1

This is because, your loop has to return elements. Those elements will go into your tags and thus it will be rendered.

Now, map returns an array of the same size with the modified elements. forEach does not return anything. It is just traversing the array. It does not give react the elements that it needs.

<>
{
  userSubIds?.map(subId => 
    <ListItem>
      {subId.data}
    </ListItem>
  )
}
<>
// This has returned elements like this
<ListItem> some data </ListItem>
<ListItem> some data </ListItem>
<ListItem> some data </ListItem>
...

However, forEach has not returned any data.

userSubIds?.forEach(subId =>
  <ListItem>
    {subId.data}
  </ListItem>
})
// This has returned nothing.

edited Jul 16 '22 at 23:47

answered Jul 16 '22 at 23:45

Omkar Kulkarni

1,091
10
22

See my [comment above](https://stackoverflow.com/questions/73008284/why-does-javascript-map-render-my-feature-where-foreach-didnt-using-react#comment128946996_73008284). `map` with braces and no `return` doesn't return anything. OP's code is in a confused state and needs to be clarified, because what they claim works can't possibly. – ggorlen Jul 16 '22 at 23:46
I see that, thanks, but it's a subtle change that should be clarified in text. Your `forEach` has a loose brace. – ggorlen Jul 16 '22 at 23:48
@ggorlen hey sure!! Your edits to my answer are always welcomed and very much appreciated. Thanks! – Omkar Kulkarni Jul 16 '22 at 23:50

Why does Javascript map() render my feature where forEach() didn't? Using React with NextJS

1 Answers1