Ravenous part 4 - features to add to Ravenous

Get Help React.js
#1

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
#2

handleSortByChange(sortByOptionValue) {
this.setState({
sortBy: sortByOptionValue
}, () => {
this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
});

}
4 Likes
#3

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.

#4

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();
    }
  }