Ravenous Project part 3 - Problem with task 9 I NEED HELP PLEASE :'(

I’m doing the third part of “Ravenous Project” and I’m stucked in task 9. The code works, I don’t have any error message, but my app doesn’t works as it should.
In Task 9, I’ve added an ‘onClick’ attribute, and it is assumed that if I click on the “search options” at the top of the search bar, it turns in yellow and gets marked. But in my case, it doesn’t happens.

I don’t know where is the problem, I need help, please.

I let a screenshot to show that it doesn’t turns in yellow, and I let the code.

Here is the code of “SearchBar.js” document:

import React from 'react';
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'
          };
    }

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

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

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 placeholder="Search Businesses" />
          <input placeholder="Where?" />
        </div>
        <div className="SearchBar-submit">
          <a>Let's Go</a>
        </div>
      </div>
    );
  }
}

export default SearchBar;

Hello and welcome! Your code seems to work so take a look in the css-file since this controls the yellow styling of those buttons. If you don’t see a problem right away then you can also post the .css file here. Another thing to explore is if your React component state is changing when you press those 3 buttons. Install React dev-tools (if you don’t have it already), open up Chrome dev-tools, click on Components tab, and click on the SearchBar component. Now in React dev-tools you should be able to see how and if the sortBy state is changing when pressing those 3 buttons. If the state is changing, you probably have a styling issue but if it’s not changing, then it’s likely an issue with the logic.

1 Like

Thank you so much, I’m still looking for the problem, I share the css-file here because I can’t find the problem yet.

Here is the “SearchBar.css” file

.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;
    }
  }

Strange. The css file seems to work fine as well as far as changing colors on those buttons. Did you see if state is changing in React
Dev tools?

Maybe upload App.js as well since it’s the parent component and could possibly play a role. Also, what browser (new version?) are you using for the project and did you build it locally on your own computer?

I’m not sure how to see if the state is changing in React Dev Tools, I will try to see it now.
I’m using firefox 88.0.1 and I’ve never had problems with it.

Here is App.js:

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

import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar />
        <BusinessList />
      </div>
    );
  }
}

export default App;

Okay, I’m not sure how, but it works now.
Thank you for your help :slight_smile:

1 Like

You mentioned that you were stuck in 2nd part of project. But it sounds like you are in the 3rd part at Step 9. Is this the part you are in?
https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-three/projects/setting-searchbar-state

If so, make sure you have completed all of the 2nd part of the project:
https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-two/projects/passing-information

It was a while ago I worked through this but it looks like you may have missed some steps from Part 2. For example, in Step 5 (of Part 2) we add a businesses property when rendering the BusinessList component. In App.js you don’t pass any props to BusinessList. So I would double-check that you completed all those steps in section 2. If some of those steps are not completed correctly it could cause the app to stop working. But usually you should have some error-messages both in the console and in the command-line environment? The key is to really read those, if they are there, and fix them one by one. You could also upload your other components files as well…

Great that you got it working!

1 Like

Yes I’m at the third part. I was looking my saved copies for the 2nd part and I’ve changed a couple of things and now it works well. I’m not sure what was exactly de error because I’ve changed various things, but at least it works hahaha.

Thank you for your comments, it helped me a lot :smiley:

1 Like