I get this Error when clicking the Let’s Go button
I have serched forums and watched the video but cant figure out whats wrong with my code
TypeError: Cannot read property ‘map’ of undefined
BusinessList.render
C:/webReact/codeacad/ravenous/src/components/BusinessList/BusinessList.jsx:13
10 | 11 | render() { 12 | return (> 13 | <div className="BusinessList"> | ^ 14 | {this.props.businesses.map(businesses => { 15 | return <Buisness key={businesses.id} business={businesses} />; 16 | })}
View compiled
17 stack frames were collapsed.
(anonymous function)
C:/webReact/codeacad/ravenous/src/App.jsx:18
15 | 16 | searchYelp(term, location, sortBy) { 17 | Yelp.searchYelp(term, location, sortBy).then(businesses => {> 18 | this.setState({ businesses: businesses }); | ^ 19 | }); 20 | } 21 |
Here are my files
App.jsx
import React, { Component } from "react";
import "./App.css";
import BusinessList from "./components/BusinessList/BusinessList.jsx";
import SearchBar from "./components/SearchBar/SearchBar.jsx";
import Yelp from "./util/Yelp.js";
class App extends 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;
Yelp.js
const apiKey =
"kN6dMOyHD_fTCFBsyT9e9FzLGVlz0L7ZSuOtF9ytCyGU9xyq60b_hw0-kiUt_h7WomX6xJufPeKBJyyn4I1zbNcwZ4c6vGQHUGwXxvuh1vZQaC5W7CeIQw3yDxfPXHYx";
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) {
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.zip_code,
category: business.categories[0].title,
rating: business.rating,
reviewCount: business.review_count
};
});
}
})
.catch(error => console.log(error));
}
};
export default Yelp;
BusinessList.jsx
import React from "react";
import "./BusinessList.css";
import Buisness from "../Business/Business";
class BusinessList extends React.Component {
state = {};
constructor(props) {
super(props);
}
render() {
return (
<div className="BusinessList">
{this.props.businesses.map(businesses => {
return <Buisness key={businesses.id} business={businesses} />;
})}
</div>
);
}
}
export default BusinessList;