I am doing ravenous project part 4 and constantly getting this error “TypeError: this.props.businesses is undefined” I went through code 2 3 times but I can’t see anything wrong. Here are my files:
App.js
import React from 'react';
import './App.css';
import SearchBar from './components/SearchBar/SearchBar';
import BusinessList from './components/BusinessList/BusinessList';
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;
Yelp.js
const apiKey = "5lp4gs6bYKv-_cdsKRDyCUILGnB2yBVwjXbqj7ocAvJP9_mNQX2dtwfn6kkAQ1_8uTp_OLEKvwZDBYH6WjWB87Xxyt3yQyljtFz2YAlZO61wr-0glHGmmqh_Y0TzXnYx";
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.location.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
};
});
}
});
}
};
export default Yelp;