Hi there,
I’ve spent some amount of time checking all the answers given to the same topic but I couldn’t find the answer to my issue…Can anyone please help me?
Below is my code.
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;
Yelp.js
const apiKey =
"FivVW4IH7FCjk7CnynCAYHu1oeharjNhtyp9gkXJ4iVbTE1E-c213Yzs11xj_fh12oUuoUYdk32klsyC5y5NQ-8eG1U1FoWc566YuAnlf3twpAmspCsePOW6HNmOX3Yx"; // Insert API key here.
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) => {
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;
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;
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.city}</p>
<p>{`${this.props.business.state} ${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;
and 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";
}
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
className={this.getSortByClass(sortByOptionValue)}
key={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;
I have used even the code provided in the solution given by Codecademy but it gives me the same Typerror.
Thank you!!!
Adrian
