Hi all I keep getting this error. any help would be appreciated.
TypeError: Cannot read property 'map' of undefined
BusinessList.render
C:/Users/dan_g/OneDrive/Documents/Codecademy/ravenous/src/components/BusinessList/BusinessList.js:8
5 | class BusinessList extends React.Component {
6 | render () {
7 | return (
> 8 | <div className="BusinessList">
9 | {
10 | this.props.businesses.map(business => {
11 | return <Business key={business.id} business={business} />;
View compiled
▶ 18 stack frames were collapsed.
(anonymous function)
C:/Users/dan_g/OneDrive/Documents/Codecademy/ravenous/src/components/App/App.js:20
17 | }
18 | searchYelp(term, location, sortBy){
19 | Yelp.searchYelp(term, location, sortBy).then((businesses) => {
> 20 | this.setState({businesses: this.props.businesses});
| ^ 21 | });
22 | }
23 |
import React from 'react';
import './App.css';
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.props.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;
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;
const apiKey = "q0CtU8ZMPqCdq112PWHGhfaqjIokWc0B-K40N_IEcUnXh4caQuppeig8pmWa9YLY7YOUHti1xlHjxIuhngjJ5YChImXtfXFp8T44IeTREtqMDk-6jH7go5SUaWA1X3Yx";
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,
imgSrc: business.image_url,
name: business.name,
address: business.location.address1,
city: business.location.city,
state: business.location.state,
zipCode: business.location.zipCode,
category: business.categories[0].title,
rating: business.rating,
reviewCount: business.review_count,
};
});
}
})
}
};
export default Yelp;
import React from 'react';
import './Business.css';
class Business extends React.Component {
render() {
const { business } = this.props;
return (
<div className="Business">
<div className="image-container">
<img src='https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg' alt=''/>
</div>
<h2>{business.name}</h2>
<div className="Business-information">
<div className="Business-address">
<p>{business.address}</p>
<p>{business.city}</p>
<p>{business.state}{business.zipCode}</p>
</div>
<div className="Business-reviews">
<h3>{business.category}</h3>
<h3 className="rating">{business.rating}</h3>
<p>{business.reviewCount}</p>
</div>
</div>
</div>
)
}
};
export default Business;
import React from 'react';
import './SearchBar.css';
class SearchBar extends React.Component {
constructor(props){
super(props);
this.state = {
term: "",
location: "",
sortBy: "best_match",
};
this.handleTermChange = this.handleTermChange.bind(this);
this.handleLocationChange = this.handleLocationChange.bind(this);
this.handleSearch = this.handleSearch.bind(this);
this.sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
}
}
handleSortByChange(sortByOption){
this.setState({ sortBy: sortByOption });
}
handleTermChange(event){
this.setState({ term: event.target.value });
}
handleLocationChange(event){
this.setState({ location: event.target.value });
}
handleSearch(event){
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
event.preventDefault();
}
getSortByClass(sortByOption){
if (sortByOption === this.state.sortBy){
return "active";
} else {
return "";
}
}
renderSortByOptions() {
return Object.keys(this.sortByOptions).map(sortByOption => {
let sortByOptionValue = this.sortByOptions[sortByOption];
return <li key={sortByOptionValue} onClick={this.handleSortByChange.bind(this, sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)}> {sortByOption} </li>;
});
}
render() {
return (
<div className="SearchBar" searchYelp={this.searchYelp}>
<div className="SearchBar-sort-options">
<ul>
{this.renderSortByOptions()}
</ul>
</div>
<div className="SearchBar-fields">
<input placeholder="Search Businesses" onChange={this.handleTermChange}/>
<input placeholder="Where?" onChange={this.handleLocationChange}/>
</div>
<div className="SearchBar-submit">
<a href = "www.#.com" onClick={this.handleSearch}>Let's Go</a>
</div>
</div>
)
}
}
export default SearchBar;
