Hey everyone, when I input a business name like Taco , city Seattle, and I click on Let’s go button in Search bar of ravenous page it doesn’t go no where.
I don’t know what to do, I spent a couple of hours and no solution.
Please help me
I don’t know where I done something wrong. And what link do we need to put on that a tag in SearchBar.js?
here’s my code:
Yelp.js
const apiKey = 'HSvKZQ7vPDUKHjC5_uvY0Mv23JPTd2V8SfAKFuyAWu4KWQIF2VJ5_TKpH1xRTLRJJXDydmvVRMmNC-fnq1aLcs7x0SvTiHgAWKE_STDk1DXtqZRJqZJlwf_2dfGiX3Yx';
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.loaction.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;
SearchBar.js
import React from 'react';
import './SearchBar.css';
const sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
};
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
term: '',
location: '',
sortBy: 'best-match'
}
this.sortByOptions = {
"Best Match": "best_match",
"Highest Rated": "rating",
"Most Reviewed": "review_count"
}
this.handleTermChange= this.handleTermChange.bind(this);
this.handleLocationChange= this.handleLocationChange.bind(this);
this.handleSearch= this.handleSearch.bind(this);
this.handleSortByChange = this.handleSortByChange.bind(this);
}
getSortByClass(sortByOption) {
if(sortByOption === this.state.sortBy) {
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 = sortByOptions[sortByOption];
return <li onClick={this.handleSortByChange.bind(this, sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>;
});
}
render() {
return (
<div className="SearchBar">
<div className="SearchBar-sort-options">
<ul>
{this.renderSortByOptions()}
</ul>
</div>
<div className="SearchBar-fields">
<input onChange={this.handleTermChange}placeholder="Search Businesses" />
<input onChange={this.handleLocationChange}placeholder="Where?" />
</div>
<div className="SearchBar-submit">
<a href='foo' onClick={this.handleSearch}>Let's Go</a>
</div>
</div>
);
}
}
export default SearchBar;
App.js
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import BusinessList from '../BusinessList/BusinessList';
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;
Business.js
import React from 'react';
import './Business.css';
class Business extends React.Component {
render() {
const {business} = this.props;
return (
<div className="Business">
<div className="image-container">
<img src={business.imageSrc} alt=''/>
</div>
<h2>{business.name}</h2>
<div className="Business-information">
<div className="Business-address">
<p>{business.address}</p>
<p>{business.city}</p>
<p>{business.state} {business.zipCode}</p>
</div>
<div className="Business-reviews">
<h3>{business.category}</h3>
<h3 className="rating">{business.rating}</h3>
<p>{business.reviewCount}</p>
</div>
</div>
</div>
)
};
}
export default Business;
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;
Thank you in advance. 
