Ravenous part 3 : onClick handle sorting options

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

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?

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