Ravenous Part 4: Unhandled Rejection (TypeError): Cannot read property 'map' of undefined -

@craftykate

Problem with Ravenous Part 4 intereacting with YELP API

Hi guys, currently struggling to get Ravenous part 4 API to work. When ever I click on Let’s go I get a error:

Here are my files:
YELP.js

// Client ID
// YLia8B532mwoMjliNY8Qjg

// API Key
// giFAoHWgggFAjRpCZAv9v5dFrWznyo13DK390_NzZGOxBv0ncVGNZkkAiQI71YU3W2UmYd3suUhjzsQxYijopNVfcyxqkH8vaD5PyJPGiej5GJm87KVVWrU7k-cnXXYx3

const apiKey = 'giFAoHWgggFAjRpCZAv9v5dFrWznyo13DK390_NzZGOxBv0ncVGNZkkAiQI71YU3W2UmYd3suUhjzsQxYijopNVfcyxqkH8vaD5PyJPGiej5GJm87KVVWrU7k-cnXXYx3';

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) => { 
                    
                return { 
                    id: business.id,
                    imageSrc: business.image.url,
                    name: business.name,
                    address: business.address,
                    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,
                }
            }));
        }
    })
}
};


export default Yelp

App.js



import React from 'react';
import './App.css';
import Business from '../Business/Business'
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';
import Yelp from '../../util/Yelp'


 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     businesses: [],
       
   }; 
   this.searchYelp = this.searchYelp.bind(this);
 
  }

  searchYelp(term, location, sortBy) {
    Yelp.searchYelp(term, location, sortBy).then((businesses) => { 
      this.setState({businesses: businesses});
  })
  }

  render() {
    return (
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar searchYelp={this.searchYelp} />
        <BusinessList businesses={this.state.businesses} />
      </div>
    );
  }
}

export default App;

Businesslist.js

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

Business.js

import React from 'react';
import './Business.css';

class Business extends React.Component {
  render() {
    return (
      <div className="Business">
        <div className="image-container">
          <img src={this.props.business.imageSrc} alt=''/>
        </div>
        <h2>{this.props.business.name}</h2>
        <div className="Business-information">
          <div className="Business-address">
            <p>{this.props.business.address}</p>
            <p>{this.props.business.city}</p>
            <p>{`${this.props.business.state} ${this.props.business.zipCode}`}</p>
          </div>
          <div className="Business-reviews">
            <h3>{this.props.business.category.toUpperCase()}</h3>
            <h3 className="rating">{`${this.props.business.rating} stars`}</h3>
            <p>{`${this.props.business.reviewCount} reviews`}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default Business;

BusinessList is getting passed an undefined businesses prop - so it’s throwing an error when it tries to map an undefined object.

BussinessList is getting called by App which passes in this.state.businesses - try console logging this.state.businesses in the App and see what you have at that point. If that is undefined you can continue working backwards. For instance, after you call Yelp.searchYelp in App.js, try console logging businesses and see if that is undefined. If so, you likely have a problem in your Yelp file.

1 Like