Hi Everyone, i’ve been comparing my code to the solutions for part 4 and trawling topics on this forum to identify possible solutions but can’t find any- any help would be appreciated.
I’ve identified there is a problem with my fetch request- it’s not returning the raw data or the JSON stuff. I tripled checked my api key which is correct. no where in the instructions does it advise to use your ‘clientid’ so i havent. Can anyone advise what i’m missing? I feel i’ve checked every obvious error.
I’m getting the following message on my screen:
TypeError: Cannot read property 'map' of undefined
BusinessList.render
I know why i’m receiving it- my fetch isnt getting the information so the mapping is trying to iterate through an empty object of undefined. -.-
my code:
Yelp.js:
const Yelp = {
search(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 => {
console.log(response)
return response.json();
}).then(jsonResponse => {
console.log(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;
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 business={business} key={business.id} />
})
}
</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.state}</p>
<p>{this.props.business.city}</p>
<p>{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
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() returns the current CSS class for a sorting option.
getSortByClass(sortByOption) {
return this.state.sortBy === sortByOption ? 'active': '';
}
handleSortByChange(sortByOption) {
this.setState({ sortBy: sortByOption});
}
handleTermChange(e) {
this.setState({term: e.target.value})
}
handleLocationChange(e) {
this.setState({location: e.target.value})
}
handleSearch(e) {
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)
e.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">
<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;
Finally App.js:
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.searchYelp = this.searchYelp.bind(this)
}
searchYelp(term, location, sortBy) {
Yelp.search(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;
I’m seeing a lot of people get this error but i havent found a solution on my end. Any help would be appreciated. I feel i’m missing something very obvious.
Thanks in advance!
