Ravenous Part 3

Hello, I have encountered an obstacle during this course that drives me nuts. I am supposed to define two methods for the SearchBar component, which handle changes to the term and location properties of this.state. However, the way in which I knew this should be accomplished isn’t working for me, would you kindly help me with this?

Here’s my code:

import React from 'react';
import "../BusinessList/BusinessList.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.getSortByClass=this.getSortByClass.bind(this);
    this.handleSortByChange=this.handleSortByChange.bind(this);
    this.handleTermChange=this.handleTermChange.bind(this);
    this.handleLocationChange=this.handleLocationChange.bind(this);
    this.handleSearch=this.handleSearch.bind(this);
  }

  getSortByClass(sortByOption){
    if(this.state.sortBy===sortByOption){
      return 'active';
    } else {
      return '';
    }
  }

  handleSortByChange(sortByOption){
    this.setState({sortBy: sortByOption})
  }

  handleTermChange(e){
this.setState({term: e.target.value});
  }

  handleLocationChange(e){
    this.setState({location: e.target.value});
  }

handleSearch(e){
  this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)
  e.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(this.state.term)}/>
    <input placeholder="Where?" onChange={this.handleTermChange(this.state.location)}/>
  </div>
  <div className="SearchBar-submit" onClick={this.handleSearch}>
    <a>Let's Go</a>
  </div>
</div>)
  }
}

export default SearchBar

.The error I encounter is a “TypeError: Cannot read property ‘value’ of undefined” for what’s inside the handleTermChange method.

Does it only break in your post at this point, or is that something to consider for your code in general?

<a>Let's Go</a>

the ' needs to be \' instead, maybe? Since it looks like it’s starting a string that never gets closed.

Besides that, there’s a difference in the equality operators == and === namely: abstract equality and strict equality. I can’t trial and error debug this atm, got no test environment for react set up. So that’s my input on it. Hope it helps :confused:

Hey ! As far as I’m aware, the' shouldn’t be an issue, since it behaves as it would in an HTML file.

Thanks for the input!

1 Like