Ravenous Part 3: Name and Location blank in console

Currently working on the third part of the Ravenous project
https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-three/projects/setting-searchbar-state

I got towards the part where we look at what message appears in the console when we search for a business and location. I put a business and a location in the search box and went to the console. The message appeared as:

Searching Yelp with , , best_match

I can’t seem to figure out why the business and location won’t appear in the console message.

Here’s how my code looks on App.js:
class App extends React.Component {
searchYelp(term, location, sortBy) {
console.log(Searching Yelp with ${term}, ${location}, ${sortBy})
}
render() {
return (


ravenous





)
}
}

Here’s how my code looks in SearchBar.js:

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 Reviewed’: ‘review_count’
};
}

getSortByClass(sortByOption) {
    if (this.state.sortBy === sortByOption) {
        return 'active';
    } else {
        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} onClick={this.handleSortByChange.bind(this, sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)}>{sortByOption}</li>
    });
}

render() {
    return (
        <div className="SearchBar">
            <div className="SearchBar-sort-options">
                <ul>
                   {this.renderSortByOptions()}
                </ul>
            </div>
            <div className="SearchBar-fields">
                <input onChange={this.handleTermChange} placeholder="Search Businesses" />
                <input onChange={this.handleLocationChange} placeholder="Where?" />
            </div>
            <div className="SearchBar-submit">
                <a onClick={this.handleSearch}>Let's Go</a>
            </div>
        </div>
    )
}

}

export default SearchBar;

What am I missing here?

In each of these methods, you just need to delete the =. setState() is a method, so you use it like this:
this.setState({sortBy: sortByOption})
Hope this helps!

Thanks! It’s fixed now!

1 Like