Ravenous part 3 : onClick handle sorting options

Language Help React.js
1

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

Hello,
Can someone help me to fix this challenge in the Part three & step 9 of Ravenous project, when I click one of the options on the web page, all options get selected (get highlighted) instead of only one option by instructions. I follow along with walkthrough video nothing seems to work.
here’s the 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"
    };
  }

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

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

  renderSortByOptions() {
    return Object.keys(sortByOptions).map(sortByOptions => {
      let sortByOptionValue = sortByOptions[sortByOptions];
      return (
        <li
          key={sortByOptionValue}
          onClick={this.handleSortByChange.bind(this, sortByOptionValue)}
          className={this.getSortByClass(sortByOptionValue)}
        >
          {sortByOptions}
        </li>
      );
    });
  }
  render() {
    return (
      <div className="SearchBar">
        <div class="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 href="www.#.com">Let's Go</a>
        </div>
      </div>
    );
  }
}
export default SearchBar;

Everything else is working fine so far.
Thank you

1 Like
2

Hello, @cssrockstar61275.

In React.js we have to use className instead of class. It’s possible that this is preventing the CSS from rendering properly. Also, I formatted your code, so we can see the embedded HTML. For future posts, please review How do I format code in my posts?

1 Like
3

Thank you midlingner for your inputs. After taking care of the className issue. I’m still getting the same response from the webpage which means all the options get selected when I click on one. Is there something I need to check on again?
Thank you

1 Like
4

Bumping this because I ran into this exact problem.
Checked my code, as well as watched the youtube video and everything seemed to be correct.

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

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

    handleLocationChange(event) {
        this.setState({
            location: event.target.value,
        });
    }

    renderSortByOptions()
    {
        return Object.keys(this.sortByOptions).map(sortByOption =>
            {
                let sortByOptionValue = this.sortByOptions[this.sortByOptions];
                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 href="https://www.#.com">Let's Go</a>
            </div>
            </div>
        )
    }

}

export default SearchBar;

I changed this in renderSortByOptions
let sortByOptionValue = this.sortByOptions[this.sortByOptions];
to
let sortByOptionValue = this.sortByOptions[sortByOption];
which fixed the problem for me. Looking at your code, it should fix the problem for you, too.

1 Like
5

YOOOO thank you for this. I was having the same issue and this fixed it. Thanks!