I’m on Step 25 of Ravenous: Part 3 | Codecademy.
When I enter a business and city, console only logs the business (& sortBy), or if I enter only a city that gets logged in where a business should be logged and the second input logs empty, or nothings gets logged when I delete the first input and leave the second input unless I delete both input and re-enter the second input.
I downloaded the solution and copy pasted both SearchBar.js & App.js but the result is the same
Here is how my code looks:
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.handleLocationChange = this.handleLocationChange.bind(this);
this.handleTermChange = this.handleTermChange.bind(this);
this.handleSearch = this.handleSearch.bind(this);
}
getSortByClass(sortByOption) {
if (sortByOption === this.state.sortBy) {
return 'active'
} else {
return ''
}
}
handleSortByChange(sortByOption){
this.setState({ sortBy: sortByOption});
}
handleTermChange(event) {
this.setState({ term: event.target.value });
}
handleLocationChange(event) {
this.setState({ term: event.target.value});
}
handleSearch(event) {
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
event.preventDefault();
}
renderSortByOptions () {
return Object.keys(sortByOptions).map(sortByOption => {
let sortByOptionValue = 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;