Hi
I’m working on the ravenouse part 3 and I have a problem.
I followed the instructions and the video but when I click the

I’ve done it like 3 times to check all the codes, but i couldn’t figure out what the problem is.
Here is my SearchBar.js code.
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.handleTermChange = this.handleTermChange.bind(this);
this.handleLocationChange = this.handleLocationChange.bind(this);
this.handleSearch = this.handleSearch.bind(this);
}
handleSearch(event){
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)
event.preventDefault();
}
handleTermChange(event){
this.setState({ term: event.target.value});
}
handleLocationChange(event){
this.setState({ location: event.target.value});
}
getSortByClass(sortByOption){
if (sortByOption === this.state.sortBy ){
return 'active';
}
return '';
}
handleSortByChange(sortByOption){
this.setState({ sortBy: sortByOption });
}
renderSortByOptions(){
return Object.keys(sortByOptions).map(sortByOption => {
let sortByOptionValue = sortByOptions[sortByOption];
return (<li className={this.getSortByClass(this.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’d really appreciate it if someone could help me