Hi everyone,
I try to do the list of features to add at the end of ravenous part 4.
One of them is saying “Clicking on a different sorting option automatically requeries the Yelp API, rather than having to manually click “Let’s Go” again” .
So i put searchYelp() to access the Yelp API in my handleSortByChange method like this :
handleSortByChange(sortByOptionValue) {
this.setState({
sortBy: sortByOptionValue
});
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
}
Is it the good way to resolve this ?
Because when i test and click on a sorting option, my businesses change on the page but not like it should be…ex: Highest Rated will not be in the good order with all the 20 businesses (only a few of them will work…this a very weird).
2 Likes
handleSortByChange(sortByOptionValue) {
this.setState({
sortBy: sortByOptionValue
}, () => {
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
});
}
4 Likes
Thank you, I was so stuck on this step!
I had to lookup the (setState documentation to understand that what you did is add the optional callback function.
But without your answer, I wouldn’t even know to look for it.
I tried something similar but by calling the handle search function/method directly. It didn’t work properly. It worked, but you had to press the sort option twice. Once, it seemed, to update the state; then again to search correctly. Otherwise, on the first click it would repeat the search with the old state. Your solution worked just fine but I don’t understand the difference and it requires duplicate code.
handleSortbyChange(sortByOption) {
this.setState({ sortBy: sortByOption }, this.handleSearch()});
}
handleSearch(event) {
this.props.searchYelp(
this.state.term,
this.state.location,
this.state.sortBy
);
if (event) {
event.preventDefault();
}
}