Hello everyone,
I’m currently working on the last par of the ravenous project and I’m having difficulty with spotting a bug in my code:
Here is all my code for this project
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.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 = 'hI2QHbE_7X3gJMcrKBlHLhjbN3o5kQbB8AepQTES48G-87AqrS1Vmk_mT93dmfZAotAVS59oe8MW82nlqBe-yr40pZSd-1hEYbCBxc846qYX3Bt474HMZwbopfgxXXYx';
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.rating.reviewCount
}
})
}
})
}
}
export default Yelp;
I’ve gone through the video tutorial multiple times and I cant find the cause of the error. If anyone could offer some help/advice that would be greatly appreciated!