I am trying to map through OpenBrewery's API but when I try to pull data from it it continues to come up undefined. My code:

import axios from "axios";
import "../styles/List.css";
import { useState, useEffect } from "react";
import BrewCard from "../components/BrewCard";

// data-types: brewery_type, city, country, id, name, phone, latitude, longitude, postal_code, state, street, website_url

const List = () => {
  const [brew, setBrew] = useState([]);

  useEffect(() => {
    const getBrew = async () => {
      let newBrew = await axios.get(
        "https://api.openbrewerydb.org/breweries?by_city=atlanta"
      );

      setBrew(newBrew.data);
    };
    getBrew();
  }, []);

  console.log(brew);

  return brew.length > 1 ? (
    <div className={`main-bg-color list-container`}>
      {brew.map((beer) => {
        <p>{beer.name}</p>;

      })}
    </div>
  ) : (
    <div>Loading</div>
  );
};

export default List;

The console.log shows that 'brew' has the data but when I try to map (such as my beer.name p tag), it shows 'undefined'. I'm not sure what I'm missing. Just for clarification this is what I receive when I console.log the data:

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
: 
{id: '5-seasons-brewing-co-westside-atlanta', name: '5 Seasons Brewing Co - Westside', brewery_type: 'brewpub', street: '1000 Marietta St NW Ste 204', address_2: null, …}
1
: 
{id: 'eurobevs-atlanta', name: 'EuroBevs', brewery_type: 'contract', street: '2255 Cumberland Pkwy SE', address_2: null, …}
2
: 
{id: 'eventide-brewing-co-atlanta', name: 'Eventide Brewing Co', brewery_type: 'micro', street: '1015 Grant St SE', address_2: null, …}
3
: 
{id: 'fire-maker-brewing-company-atlanta', name: 'Fire Maker Brewing Company', brewery_type: 'micro', street: '975 Chattahoochee Ave NW', address_2: null, …}
4
: 
{id: 'gordon-biersch-brewery-restaurant-atlanta-atlanta', name: 'Gordon Biersch Brewery Restaurant - Atlanta', brewery_type: 'brewpub', street: '3242 Peachtree Rd NE', address_2: null, …}
5
: 
{id: 'max-lagers-wood-fired-grill-and-brewery-atlanta', name: "Max Lager's Wood Fired Grill & Brewery", brewery_type: 'brewpub', street: '320 Peachtree St NE', address_2: null, …}
6
: 
{id: 'monday-night-brewing-atlanta', name: 'Monday Night Brewing', brewery_type: 'micro', street: '670 Trabert Ave NW', address_2: null, …}
7
: 
{id: 'monday-night-brewing-garage-atlanta', name: 'Monday Night Brewing - Garage', brewery_type: 'micro', street: '933 Lee St SW', address_2: null, …}
8
: 
{id: 'new-realm-brewing-atlanta', name: 'New Realm Brewing', brewery_type: 'brewpub', street: '550 Somerset Ter NE Unit 101', address_2: null, …}
9
: 
{id: 'odempseys-brewing-co-atlanta', name: "O'Dempsey's Brewing Co", brewery_type: 'contract', street: '205 Grosvenor Place, Nw', address_2: null, …}
10
: 
{id: 'orpheus-brewing-atlanta', name: 'Orpheus Brewing', brewery_type: 'micro', street: '1440 Dutch Valley Pl NE Ste 2001', address_2: null, …}
11
: 
{id: 'park-tavern-brewery-atlanta', name: 'Park Tavern Brewery', brewery_type: 'brewpub', street: '500 10th St NE', address_2: null, …}
12
: 
{id: 'perfect-fool-brewing-company-atlanta', name: 'Perfect Fool Brewing Company', brewery_type: 'planning', street: null, address_2: null, …}
13
: 
{id: 'red-brick-brewing-co-atlanta-brewing-co-atlanta', name: 'Red Brick Brewing Co / Atlanta Brewing Co', brewery_type: 'micro', street: '2323 Defoor Hills Rd NW', address_2: null, …}
14
: 
{id: 'sabbath-brewing-atlanta', name: 'Sabbath Brewing', brewery_type: 'planning', street: null, address_2: null, …}
15
: 
{id: 'scofflaw-brewing-co-atlanta', name: 'Scofflaw Brewing Co', brewery_type: 'micro', street: '1738 Macarthur Blvd NW', address_2: null, …}
16
: 
{id: 'second-self-brewing-atlanta', name: 'Second Self Brewing', brewery_type: 'micro', street: '1311 Logan Cir NW', address_2: null, …}
17
: 
{id: 'stats-brewpub-atlanta', name: 'Stats Brewpub', brewery_type: 'brewpub', street: '300 Marietta St NW', address_2: null, …}
18
: 
{id: 'sweetwater-brewing-co-atlanta', name: 'SweetWater Brewing Co', brewery_type: 'regional', street: '195 Ottley Dr NE', address_2: null, …}
19
: 
{id: 'the-lost-druid-atlanta', name: 'The Lost Druid', brewery_type: 'planning', street: null, address_2: null, …}
length
: 
20
[[Prototype]]
: 
Array(0)

I tried mapping through the API as normal but it seems I'm somehow not reaching into the json structure properly. I need to be able to map elements of this API to create a React page that lists all results.

CodePudding user response：

You are missing a return in the map function for the p element. Change your code from

{brew.map((beer) => {
    <p>{beer.name}</p>;
})}

to

{brew.map((beer) => {
    return <p>{beer.name}</p>;
})}

or do it inline like this

{brew.map((beer) => <p>{beer.name}</p>)}