Ravenous Part 3 - HALP PLEASE!

Language Help React.js
1

Ohhh man this is driving me nuts.

Can someone please tell me why, when I click on the search by options they do not change color like they are supposed to?

I’m obviously missing something super simple but I just can’t see it :woozy_face:

Here’s the link:
https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-three/projects/setting-searchbar-state

Here’s my code for search bar:

import React from 'react';
import ReactDOM from 'react-dom';
import './SearchBar.css';

class SearchBar extends React.Component{
    constructor(props){
        super(props);
        
        this.state = {
                term: '',
                location: '',
                sortBy: 'best_match'
            }
        
        this.sortByOptions ={
    'Best Match': 'best_match',
    'Highest Rated': 'rating',
    'Most Reviewed': 'review_count'
}
        
    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleLocationChange = this.handleLocationChange.bind(this)
            
 }
    
        
    handleSortByChange(sortByOption){
        this.setState({ sortBy: {sortByOption} });
    }
    
    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';
        } else {
            return '';
    }
    }
    
    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>Let's Go</a>
                </div>
            </div>)
    }
}

export default SearchBar

and the CSS:

.SearchBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url('./background_search_desktop.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 25rem;
}

.SearchBar-sort-options ul {
  display: flex;
  justify-content: center;
  margin-bottom: 2.22rem;
  color: #ffffff;
}

.SearchBar-sort-options li {
  cursor: pointer;
  width: 4.33rem;
  border-bottom: 1px solid #fff;
  padding: 0 2.58rem .33rem 2.58rem;
  line-height: 1.13;
  text-align: center;
  font-weight: 600;
  font-size: .83rem;
  transition: color .25s;
}

.SearchBar-sort-options li:hover {
  color: #d4cfcf;
}

.SearchBar-sort-options li.active,
.SearchBar-sort-options li.active:hover {
  border-bottom: 1px solid #f0c36c;
  color: #f0c36c;
}

.SearchBar-fields {
  display: flex;
  justify-content: center;
  margin-bottom: 2.88rem;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  margin-right: 2.22rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
}

.SearchBar-fields input:last-child {
  margin-right: 0;
}

.SearchBar-submit {
  text-align: center;
}

.SearchBar-submit a {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
}

.SearchBar-submit a:hover {
  cursor: pointer;
  background-color: #a7874b;
}

@media only screen and (max-width: 560px) {
  .SearchBar {
    background-image: url('./background_search_mobile.jpg');
  }

  .SearchBar-sort-options ul {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .SearchBar-fields {
    flex-direction: column;
    align-items: center;
  }

  .SearchBar-fields input {
    margin-right: 0;
    margin-bottom: .86rem;
  }
}

THANKS IN ADVANCE.

1 Like
2

Hello, @happymelonbox, and welcome to the forums!

If you add a few console.log() statements, you can see the issue. Try this:

Open the console in your browser, and click on the sort by options observing the output to the console each time. In order for the 'active' class to be assigned, the two printed values must be equal. Will they ever be?

3

Hey @midlindner,

Thanks for your reply,

When this is logged it shows that they match when they are clicked… but they don’t change to yellow…

I am very confused by this :sweat_smile:

4

When I tried it, they didn’t match. One is a string, the other is an object. Since a string is not the same as an object, ‘active’ is never returned. The question is where did the object come from? That would be here:

Try removing the curly braces.

1 Like
5

AHHHHH.

You are brilliant @midlindner . Thank you!

2 Likes
6

You’re welcome! Happy coding!