Ravenous Part 4: TypeError: Cannot read property 'map' of undefined

There are several other conversations already on the exact same issue but none seem to have the same cause as mine. This error doesn’t actually appear until after several search results. Apparently I can look for food in Seattle, London, Oslo but as soon as I try Cape Town, it crashes.

const Yelp = {
searchYelp (term, location, sortBy) {
    return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
        headers: {
            Authorization: `Bearer ${apiKey}`,
        },
    }).then((response) => {
        return response.json();
    }).then((jsonResponse) => {
        if (jsonResponse.businesses) {
            return jsonResponse.businesses.map(((business) => {
                console.log(business);
                return {
                    id: business.id,
                    imageSrc: business.image_url,
                    name: business.name,
                    address: business.address1,
                    city: business.location.city,
                    state: business.location.state,
                    zipCode: business.location.zip_code,
                    category: business.categories[0].title,
                    rating: business.rating,
                    reviewCount: business.review_count
                }
            }));
        } 
    })
}
};

I believe the code above is the issue. VSCode desperately wants to suggest that I turn this into an async function. In previous projects on CodeCademy we were taught to use an async function when using json.response so I’m wondering why it isn’t used here?

Anyway, this doesn’t solve the issue.

Here is my code in BusinessList.js:

class BusinessList extends React.Component {
    render() {
        return (
            <div className="BusinessList">
                {
                    this.props.businesses.map(business => {
                        return <Business business={business} key={business.id}/>;
                    })
                }
            </div>
        );
    }
}

Help pretty please?

1 Like

I have just finished this project but I am encountering the exact same problem. If I search for any food type for example in Dubai, Cape Town or Bangkok, I get the same TypeError: Cannot read property ‘map’ of undefined.

Yet when I search for Italian food in other cities like Stockholm, Ottawa and Bristol, there’s no problem, the app runs perfectly.

Could this be an issue with Yelp’s city/location recognition?

1 Like

its november 2020, and I’m having the same problems… but only after searching one time