Ravenous Part 3 / Help me please!

[jiyoon10]

Hi
I’m working on the ravenouse part 3 and I have a problem.
I followed the instructions and the video but when I click the

s, they don’t change color to yellow
I’ve done it like 3 times to check all the codes, but i couldn’t figure out what the problem is.

Here is my SearchBar.js code.

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.handleTermChange = this.handleTermChange.bind(this);
        this.handleLocationChange = this.handleLocationChange.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
    }

    handleSearch(event){
        this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)
        event.preventDefault();
    }
    
    handleTermChange(event){
        this.setState({ term: event.target.value});
    }
    handleLocationChange(event){
        this.setState({ location: event.target.value});
    }

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

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

     renderSortByOptions(){ 
        return Object.keys(sortByOptions).map(sortByOption => {                
            let sortByOptionValue = sortByOptions[sortByOption];
            return (<li className={this.getSortByClass(this.sortByOptionValue)} key={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 onClick={this.handleSearch}>Let's Go</a>
                </div>
            </div>
        )
    }
}

export default SearchBar;

I’d really appreciate it if someone could help me

[selectall]

Hello,

I dropped your file into my completed project to practice debugging and to help. The good news is that you’re only 5 characters away from having a fully functional file that’s ready for the final part of the project.

In case you’re interested in the debugging steps I took: Without any changes, the browser’s dev tools showed the “active” class was never being assigned to one of the sort options by looking at HTML in the Elements tab. There were also no console errors to provide any other hints. Since the code that sets the class for the sort options originates in the renderSortByOptions() function, that’s where I started digging.

className={this.getSortByClass(this.sortByOptionValue)} is where the class gets assigned. You declare the sortByOptionValue variable inside the map function with let sortByOptionValue = sortByOptions[sortByOption];, so you don’t need this. when using it as an argument.

className={this.getSortByClass(sortByOptionValue)}

[jiyoon10]

Ohhhhhhh I think I wrote ‘this’ like when I use the method.
Now it works well
Thanks a lot!!!

[dwilliams10]

I am having the same issue and I am still getting this error: TypeError: Cannot read property ‘getSortByClass’ of undefined

My SearchBar.js is below:

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'

        };        

    }

    getSortByClass(sortByOption){

    //    return (sortByOption === this.state.sortBy ) ? 'active' : '';

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

            return 'active';

        } 

        return '';           

    }

    handleSortByChange(sortByOption){

        this.setState({ sortBy: sortByOption });

    }

    renderSortByOptions(){

        return Object.keys(sortByOptions).map(sortByOption =>{

            let sortByOptionValue = sortByOptions[sortByOption];

            return <li key={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 placeholder="Search Businesses" />

                <input placeholder="Where?" />

            </div>

            <div className="SearchBar-submit">

                <a>Let's Go</a>

            </div>

            </div>

        );

    }

}

export default SearchBar;