Ravenous 3

Get Help React.js
,
1

Hello,

May someone elaborate on the Search component of the Ravenous project?

The concepts in the project build on the knowledge from the stateless/stateful component lessons preceding the project. Yet the complexity is not detailed out, so I can’t rationalize the learning as I was able when going through the Video Player project :slight_smile:

For example, the necessaty of binding methods in the constructor is clear to me:

this.handleTermChange = this.handleTermChange.bind(this);
    this.handleLocationChange = this.handleLocationChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);

However, I can’t rationalize why event method event.preventDefault() is used within another method. Could you help a newbie out and rationalize, please?

handleSearch(event) {
    this.props.searchYelp(
      this.state.term,
      this.state.location,
      this.state.sortBy,
      **event.preventDefault()**
    );
  }

Also, if I understand correctly, searchYelp is passed to SearchBar.js from App.js using props, but I can’t figure out why:

this.state.term: **why's nothing here like in other methods?**
      this.state.location, **why do we use this.state, when we have bonded the method in the constructor?**
      this.state.sortBy,

Thank you :slight_smile:

2

event.preventDefault() is necessary in handleSearch() because they have you attach it to the click event of a stylized link. In order to prevent the default behavior of the browser to follow a link that is clicked, event.preventDefault() is called. If they had used a different HTML element to attach it to, then it may not be necessary.

I think part of the confusion is that you aren’t placing it where they intended you to put it. It shouldn’t be sent to the searchYelp() function, but instead should be called on its own. I recommend putting it on the first line of handleSearch() so that if your call to searchYelp causes an error, event.preventDefault() will have already been called and the browser won’t attempt the follow the link.

You listed all the state properties but seem to be referring to them as methods, though I may be misunderstanding you.

You should have binded this to each of the handler methods (e.g. handleTermChange, handleLocationChange, etc.) in order to be able to use this.setState() to update the state of each of them.

You’d still need to access them using this.state.whatever like you had to in App.js to access this.state.businesses.

3

Hey,

Thanks on the event.preventDefault() I’ve definitely overlooked that :sweat_smile:

Binding is something I know I should do, even though it’s not entirely clear to me why :slight_smile:

I was more puzzled by this.state.term and the like instead of using this.term. Is it because the searchYelp method is passed through the App.js component?

Thank you