Ravenous Part 3

Language Help JavaScript
1

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.

2

My bad, I just realized I posted this in the JavaScript category. Moving to React.