JS .map function is not displaying any element

Question

I have a .map() function on an array.

When I do a console.log(object) inside the .map it logs the object.
But when I do <li key={key}>{object.name}</li> it shows nothing. Also not in the inspection tool.

Component:

<StyledImagesList>
    {this.state.images.map((imageObject, key) => {
        // <img src={imageObject.contentUrl} title={imageObject.name} />
        <li key={key}>{imageObject.name}</li>
        {console.log(imageObject)}
    })}
</StyledImagesList>

StyledImagesList has no styling

export const StyledImagesList = styled.ul;

Any idea why my li 's won't be visible?

you need to return something in a map

Jaromanda X
– Jaromanda X

2019-04-12 11:49:09 +00:00
Commented Apr 12, 2019 at 11:49 — Jaromanda X
– Jaromanda X, Commented Apr 12, 2019 at 11:49
@JaromandaX but ofcourse... Thanks for the help ;)

MrLine
– MrLine

2019-04-12 11:53:12 +00:00
Commented Apr 12, 2019 at 11:53 — MrLine
– MrLine, Commented Apr 12, 2019 at 11:53

Dacre Denny · Accepted Answer · 2019-04-12 11:57:34Z

2

Returning the <li> element in your map() callback should resolve the issue:

<StyledImagesList>
    { this.state.images.map((imageObject, key) => {
        // <img src={imageObject.contentUrl} title={imageObject.name} />

        /* Logging would need to happen before the return */
        console.log(imageObject);

        /* Add return here */
        return <li key={key}>{imageObject.name}</li>
    }) }
</StyledImagesList>

If logging to console were not needed, you could achieve the same result with the more concise equivalent of:

<StyledImagesList>
    { this.state.images.map((imageObject, key) => <li key={key}>{imageObject.name}</li>) }
</StyledImagesList>

edited Apr 12, 2019 at 11:57

answered Apr 12, 2019 at 11:52

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

2 Comments

Cameron Downer Over a year ago

There is a shortcut here for logging => console.log(imageObject) || <li key... because the log is a Falsy return.

Dacre Denny Over a year ago

Nice! Thanks for that , this could come in handy 😊

mbojko · Accepted Answer · 2019-04-12 11:53:20Z

2

Return is missing. Either

    this.state.images.map((imageObject, key) => {
        return <li key={key}>{imageObject.name}</li>;
    })

or

    this.state.images.map((imageObject, key) => (
        <li key={key}>{imageObject.name}</li>
    ))

answered Apr 12, 2019 at 11:53

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Comments

fedesc · Accepted Answer · 2019-04-12 18:09:44Z

0

Map() uses return in it's code block in order to push each elements to a NEW array. It doesn't touch the original one.

The code you do inside the loop does run in fact... It's just that you didn't got any thing in return to show.

Doing

return <li key={key}>{imageObject.name}</li>

will build you a new array with those html elements for you.

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

The map() method calls the provided function once for each element in an array, in order.

Note: map() does not execute the function for array elements without values.

Note: map() does not change the original array.

edited Apr 12, 2019 at 18:09

answered Apr 12, 2019 at 11:53

fedesc

2,6103 gold badges25 silver badges40 bronze badges

Collectives™ on Stack Overflow

JS .map function is not displaying any element

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related