Using Array.map in React

Question

I'm confused how this code work

const sidebar = (
        <ul>
        {
            props.posts.map((post) =>
                <li key={post.id}>
                    {post.title}
                </li>
            )
        }
        </ul>
    );

I know that a map returns an array, but how can it return all these tags

<li key={post.id}>
    {post.title}
</li>

and render it?

I have tried changing it to forEach but it's not working. Nothing displays on the UI:

const sidebar = (
    <ul>
        {
            props.posts.forEach((post) =>{
                return <li key={post.id}>
                    {post.title}
                </li>
            })
        }
    </ul>
);

return in forEach is ignored, meaning that the callback is of type Function<void>. Array.map, instead, returns a new value, it's far different. The result of your forEach espression is undefined. The result of the map espression is an array, instead. — briosheje
– briosheje, Commented Dec 18, 2018 at 7:53

boosted_duck · Accepted Answer · 2018-12-18 08:20:09Z

2

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

The forEach() method executes a provided function once for each array element.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

This means if you try to return something in the method executed in forEach you are not creating an array of tags.

JSX is expecting an array of tags to be rendered but in forEach you are not creating an array you are just iterating over the array so JSX receives nothing at the end

edited Dec 18, 2018 at 8:20

boosted_duck

5084 silver badges16 bronze badges

answered Dec 18, 2018 at 7:55

Kabbany

5152 silver badges7 bronze badges

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

2 Comments

boosted_duck Over a year ago

Hello, thanks for answering my concern. I know that part, however i want to know how an array of <li> tags are rendered. Because when i look at it, its just like <ul>[array_of_list]</ul>. Also, why the list tag does not render when I use forEach even i return it on each iteration?

Kabbany Over a year ago

JSX is expecting an array of tags to be rendered but in forEach you are not creating an array you are just iterating over the array so JSX receives nothing at the end.

Collectives™ on Stack Overflow

Using Array.map in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related