I have checked my syntax a million times and cannot find any mistake. My application is fine until I click ‘Lets Go’. I checked the console I get a 400 error:
Failed to load resource: the server responded with a status of 400 (Bad Request)
and
Uncaught TypeError: Cannot read property 'map' of undefined: BusinessList.js:8
App.js:
import React from 'react';
import './App.css';
import BusinessList from './components/BusinessList/BusinessList';
import SearchBar from './components/SearchBar/SearchBar';
import Yelp from '../src/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">
<div className="App">
<h1>ravenous</h1>
<SearchBar searchYelp={this.searchYelp} />
<BusinessList businesses={this.state.businesses} />
</div>
</div>
);
}
}
export default App;
BusinessList.js:
import React, { Component } from 'react';
import './BusinessList.css';
import Business from '../Business/Business';
class BusinessList extends Component {
render() {
return(
<div className='business-list'>
{ this.props.businesses.map(business => {
return <Business key={business.id} business={business} />
})}
</div>
);
}
}
export default BusinessList;
Yelp.js:
const apiKey = 'HeEf5ujS52b8UhWBh0s9HcdGSWa7byiM20dPoSPgf1qT-JYB-J0VNl62ZpyRrFFhbOry2j20EDxmKiJ0sfQ9FEWR6mNl4ybHHBh-4ttcdVkHngrrTE4jYmZ9B9fjXHYx';
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.zipCode,
category: business.categories[0].title,
rating: business.rating,
reviewCount: business.review_count
};
}));
}
})
}
}
export default Yelp;
A lollipop to anyone who can solve it!