@midlindner, I am getting the same issue referencing the same line of code (TypeError: Cannot read property ‘map’ of undefined) but my code matches the solution almost exactly and still not working. I don’t know where it is going wrong. Here is my error and code.
App.js
<import React from ‘react’;
//import logo from ‘…/…/…/src/logo.svg’;
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.searchYelp = this.searchYelp.bind(this);
}
searchYelp(term, location, sortBy) {
Yelp.searchYelp(term, location, sortBy).then((businesses) => {
this.setState({
businesses: this.businesses
});
});
}
render() {
return (
ravenous
);
}
}
export default App;
Business.js
<import React from ‘react’;
import ‘./Business.css’;
//import ReactDOM from ‘react-dom’;
class Business extends React.Component {
render () {
//const { business } = this.props;
return (
{this.props.business.name}
{this.props.business.address}
{this.props.business.city}
{this.props.business.state}, {this.props.business.zipCode}
{this.props.business.category.toUpperCase()}
{${this.props.business.rating} stars}
{${this.props.business.reviewCount} reviews}
);
}
}
export default Business;>
BusinessList.js
<import React from ‘react’;
import ‘./BusinessList.css’;
import Business from ‘…/Business/Business’;
class BusinessList extends React.Component {
render () {
return (
{
this.props.businesses.map(business => {
return
})
}
);
}
}
export default BusinessList;>
SearchBar.js
<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.handleSortByChange = this.handleSortByChange.bind(this);
this.sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
};
}
getSortByClass(sortByOption){
if (this.state.sortBy === sortByOption) {
return 'active';
} else {
return '';
}
}
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();
}
renderSortByOptions() {
return Object.keys(this.sortByOptions).map(sortByOption => {
let sortByOptionValue = this.sortByOptions[sortByOption];
return (<li key={sortByOptionValue} className={this.getSortByClass(sortByOptionValue)} onClick={this.handleSortByChange.bind(this, 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 onClick={this.handleSearch}>Let's Go</a>
</div>
</div>
);
}
}
export default SearchBar;
Yelp.js
<const apiKey = ‘y4WmFEnmPGfAzLsrT4d8jEMCEIMHeA3iTl13NlmUlZ7wAIepJd6GCQNorxDkL-lT8_LHgPXYkl6–ena7WIRcWFCmmnXcxBktvQOKeM9A06ymONUNF51QE6LHVcgX3Yx’
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 => ({
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;>
The only difference from the solution is my searchYelp attribute on the SearchBar render method but removing it doesn’t do anything.
Please help! Thank you!
