Ravenous Part 3 console not logging the second input

I’m on Step 25 of Ravenous: Part 3 | Codecademy.

When I enter a business and city, console only logs the business (& sortBy), or if I enter only a city that gets logged in where a business should be logged and the second input logs empty, or nothings gets logged when I delete the first input and leave the second input unless I delete both input and re-enter the second input.

I downloaded the solution and copy pasted both SearchBar.js & App.js but the result is the same

Here is how my code looks:

import React from 'react';

import './SearchBar.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.handleLocationChange = this.handleLocationChange.bind(this);

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

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

}

  getSortByClass(sortByOption) {

    if (sortByOption === this.state.sortBy) {

      return 'active'

    } else {

      return ''

    }

  }

  handleSortByChange(sortByOption){

    this.setState({ sortBy: sortByOption});

  }

  handleTermChange(event) {

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

  }

  handleLocationChange(event) {

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

  }

  handleSearch(event) {

    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);

    event.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}/>

          <input placeholder="Where?" onChange={this.handleLocationChange}/>

        </div>

        <div className="SearchBar-submit">

          <a href='www.#.com' onClick={this.handleSearch}>Let's Go</a>

        </div>

        </div>

        )

    }

}

export default SearchBar;

Hello, and welcome to the forums!

Nice work testing it thoroughly like the instruction mentions. By catching it early like this, you’re making it a lot easier to troubleshoot since it isn’t fully integrated with everything yet.

Your description of the behavior means that we need to trace how those values come to be. Your handleSearch() calls the method this.props.searchYelp() with this.state.term, this.state.location, and this.state.sortBy. Where are those values assigned? Anything strange about them when you also consider your analysis of the behavior?

Click for another hint

The state of term and location is being manipulated in the event handlers you’ve created here:

  handleTermChange(event) {

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

  }

  handleLocationChange(event) {

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

  }

Look closely at the property being manipulated in each of those handlers. They are both setting the state of term. location isn’t being set.

1 Like

You’re a life saver!! It didn’t even cross me to check those codes…

I’m glad I was able to locate the problem before clicking the last clue. Thank you so much for your help!

1 Like