Why can't I map() over this array in JSX?

Question

I must be doing something wrong. I'm working on a codepen that makes a call to a REST endpoint for beer information, then I loop over it and display some of the info. Nothing fancy and it's not complete yet in terms of nice looking CSS etc. but the looping over my array of beers doesn't work:

https://codepen.io/larryq/pen/yKyMOz

The key section is this bit below. I get my data back from the endpoint and add it to a 'beersList' array that's in my state. Then in the JSX I loop over it:

       this.state.beerList.map(beer => {
          <div>
            <div className="beer-img">
              <img src={beer.img} height="350" />
            </div>
            <div className="beer-info">
              <h2>{beer.name}</h2>
            </div>
          </div>
        })

..the trouble is, nothing appears on the screen, none of the <div>s are generated.

I know for a fact when debugging that beerList is populated with the data I'm after, and in the console I can map over it and print out the information. But on the screen here nothing happens and I can't figure out why?

Fabian Schultz · Accepted Answer · 2018-03-18 09:41:06Z

6

You have to return the JSX inside map:

this.state.beerList.map(beer => {
  return (
    <div key={beer.id}>
      <div className="beer-img">
        <img src={beer.img} height="350" />
      </div>
      <div className="beer-info">
        <h2>{beer.name}</h2>
      </div>
    </div>
  );
});

You can also return the JSX directly using ():

this.state.beerList.map(beer => (
  <div key={beer.id}>
    <div className="beer-img">
      <img src={beer.img} height="350" />
    </div>
    <div className="beer-info">
      <h2>{beer.name}</h2>
    </div>
  </div>
));

edited Mar 18, 2018 at 9:41

answered Mar 12, 2018 at 21:38

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

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

1 Comment

jkj2000 Over a year ago

Yep, knew it had to be something silly. Works now, thanks very much.

Aaqib · Accepted Answer · 2018-03-12 22:07:17Z

2

As suggested by Fabian , Make use of () or return and make sure to give key property inside the .map() to avoid the Reactjs Warning like :

        {this.state.beerList.map(beer => (
          <div key={beer.id}>
            <div className="beer-img">
              <img src={beer.img} height="350" />
            </div>
            <div className="beer-info">
              <h2>{beer.name}</h2>
            </div>
          </div>
        ))}

answered Mar 12, 2018 at 22:07

Aaqib

10.4k4 gold badges24 silver badges32 bronze badges

Collectives™ on Stack Overflow

Why can't I map() over this array in JSX?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related