Deploying my final ravenous project yields this issue:
TypeError: util_Yelp__WEBPACK_IMPORTED_MODULE_5_.default.search is not a function
I’ve compared it to the raveous part 4 solution provided and still can’t seem to fix it. I’d love some help. Thank you.
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.sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
};
}
getSortByClass(sortByOption) {
if (this.state.sortBy === sortByOption) {
return 'active';
} else {
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
key={sortByOptionValue}
className={this.getSortByClass(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
href="www.#.com"
onClick={this.handleSearch}
>Let's Go</a>
</div>
</div>
)
}
}
export default SearchBar;
App.js
//import logo from './logo.svg';
import './App.css';
import React from 'react';
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;
Yelp.js
const apiKey = '4kp299a4ze7l5O4ItRBEbYzAMEc1iErjNRC_O8v30D8pWS_xu2seFxL4ZMrc6Pv9UnJ3k5vy-f9-j3ZczR8KopVpcTPDV32VAnzgzMwijpLVkAuS-Vzwh7la0tnUX3Yx';
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.map(((business) => {
console.log(business);
return {
id: business.id,
imageSrc: business.image_url,
name: business.name,
address: business.address,
city: business.city,
state: business.state,
zipCode: business.zipCode,
category: business.category,
rating: business.rating,
reviewCount: business.reviewCount
}
}));
}
});
}
};
export default Yelp;