Ravenous Part 3

Hi struggling to get the console.log message in my react app. Have checked similar posts but none seem to help.

I should be getting the values of the input boxes into the console.log from App.js

    console.log(`You are searching for ${term},${location},${best_match}`);
  }

Full code below:

import React from 'react';
import './SearchBar.css';


class SearchBar extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      term: '',
      location: '',
      sortBy: 'best_match'
    };
    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleLocationChange = this.handleLocationChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);

    this.sortByOptions = {
      'Best Match': 'best_match',
      'Highest rated': 'rating',
      'Most Review': 'review_count'
  }
  }  


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

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

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

  handleLocationChange(event){
    this.setState({
      location: event.target.value
    })
  }
  handleSearch(event){
    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
    event.preventDefault();
  }
  renderSortByOptions(){
        return Object.keys(this.sortByOptions).map(sortByOption =>{
            let sortByOptionValue = this.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}/>
          <input placeholder="Where?" onChange={this.handleLocationChange}/>
        </div>
        <div className="SearchBar-submit">
          <a href=" " onClick={this.handleSearch}>Let's Go</a>
        </div>
        {this.searchYelp}
      </div>
      )
    }
}
export default SearchBar;

Thanks

This can be closed. I found an errorr in my App.js file . I hadn’t added searchYelp as an attribute on my SearchBar component

1 Like

Had a similar issue I wrote Yealp instead of Yelp haha. Your answer made me look at it and found it.
Thank you very much! :heart: