Can't use .map() on array from Untappd Business API - reactjs

Question

I'm working with the unTappd API to create a tap list for a website. I've used axios to pull in the data and store it in state. So far I've been able to connect to the api and display data with that conditional. The conditional was returning true and I was able to display the brewery.name but once I added the .map it was showing undefined. I've checked and brewery.items is truthy so I'm not sure whats up. Here's the output from the console.log
Object
created_at : "2016-12-24T03:46:21.229877Z"
description : ""
id :39418
items : (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
menu_id : 10416
name : "Beer List"
position : 0
public : true
type : "Section"
updated_at : "2018-09-03T21:55:14.232759Z"
__proto__ : Object
Output of the items objects:
Array(13)
0
:
{id: 6101131, section_id: 39418, position: 0, untappd_id: 2638818, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
1
:
{id: 4449771, section_id: 39418, position: 1, untappd_id: 2465457, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
2
:
{id: 6908154, section_id: 39418, position: 2, untappd_id: 801790, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-801790_dd500_sm.jpeg", …}
3
:
{id: 5356739, section_id: 39418, position: 3, untappd_id: 1238244, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-1238244_5ba42_sm.jpeg", …}
4
:
{id: 8086786, section_id: 39418, position: 4, untappd_id: 2719716, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
5
:
{id: 7623610, section_id: 39418, position: 5, untappd_id: 2791052, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2791052_0985c_sm.jpeg", …}
6
:
{id: 5882390, section_id: 39418, position: 6, untappd_id: 1238253, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-1238253_bf376_sm.jpeg", …}
7
:
{id: 7723598, section_id: 39418, position: 7, untappd_id: 2800225, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
8
:
{id: 7975683, section_id: 39418, position: 8, untappd_id: 2707563, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
9
:
{id: 7548213, section_id: 39418, position: 9, untappd_id: 2767218, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
10
:
{id: 7975604, section_id: 39418, position: 10, untappd_id: 2820742, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
11
:
{id: 7777162, section_id: 39418, position: 11, untappd_id: 2587293, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2587293_49972_sm.jpeg", …}
12
:
{id: 7777158, section_id: 39418, position: 12, untappd_id: 2681664, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2681664_e47db_sm.jpeg", …}
length
:
13
Here's the component that I'm working with: I've only set up that conditional for testing purposes. If I were to remove the beers map the page runs fine and displays the menu name.
I'm confused what I'm doing wrong here to map this function. I had trouble with this before which is why I map through section in the response. Any ideas would be helpful!
import { Component } from "react";
import axios from 'axios';
class Untappd extends Component {
constructor(){
super();
this.state = {
brewery: []
}
}
componentWillMount() {
axios({
method:'get',
url:'https://business.untappd.com/api/v1/menus/10416?full=true',
headers: {
"authorization": "Basic UN_API_KEY_HERE"
}
})
.then(res => {
let section = res.data.menu.sections.map((section, index) => {
return section
});
this.setState({ brewery: section["0"] });
console.log(this.state.brewery);
});
}
render() {
const { brewery } = this.state
const beers = brewery.items.map((beer, index) => {
<li key={index}>{beer.id}</li>
})
return(
<div>
<h1>{brewery && <h1 style={{zIndex: "9999",position: "absolute", color: "red"}}>{brewery.name}</h1>}</h1>
<ul>{beers}</ul>
</div>
)
}
}
export default Untappd;

Answer 1

You aren't returning anything in your brewery.items.map call
const beers = brewery.items.map((beer, index) => {
// this will not return
<li key={index}>{beer.id}</li>
});
You should do this to return your <li />. (Or you can use an explicit return statement in your anonymous function)
const beers = brewery.items.map((beer, index) => (
<li key={index}>{beer.id}</li>
));

Answer 2

within the map we may have to return the li.
const beers = brewery.items.map((beer, index) => (
return <li key={index}>{beer.id}</li>
));

Answer 3

Here's my updated code that is working after thinking about it a little harder. Now I have the tap list I need. Only problem is that it doesn't load until a second after the page is fully rendered. Anyone have any ideas of what could cause this?
import { Component } from "react";
import axios from 'axios';
class Untappd extends Component {
constructor(){
super();
this.state = {
brewery: []
}
}
componentDidMount() {
axios({
method:'get',
url:'https://business.untappd.com/api/v1/menus/10416?full=true',
headers: {
"authorization": "Basic AUTH_TOKEN_HERE"
}
})
.then(res => {
let items = res.data.menu.sections["0"].items.map((items)=>{
return items
})
this.setState({ brewery: items });
});
}
render() {
const { brewery } = this.state
const beers = brewery.map((beer, index) => {
return(
<li key={index}>{beer.name}</li>
);
});
console.log(brewery)
return(
<div>
<h1>Beer List</h1>
<ul>{beers}</ul>
</div>
)
}
}
export default Untappd;