Ravenous III Project Help


I’m having an issue completing the third part of the ‘Ravenous’ project in the ‘Introduction To React’ section of ‘Build Front-End Web Applications from Scratch’.


I’ve got as far as Step 8, i.e. Set the Class Name of a Sort Option, and I’m getting the following error message in my app:

Failed to compile
Line 24: ‘getSortByClass’ is not defined no-undef

Search for the keywords to learn more about each error.

My current code in the SearchBar.js file is as follows:

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) {
    this.state = {
      term: '',
      location: '',
      sortBy: 'best_match'

  renderSortByOptions() {
    return Object.keys(sortByOptions).map(sortByOption => {
      let sortByOptionValue = sortByOptions[sortByOption];
      return <li className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>;

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

  handleSortByChange(sortByOption) {
      sortBy: sortByOption

  render() {
    return (
      <div className="SearchBar">
        <div className="SearchBar-sort-options">
        <div className="SearchBar-fields">
          <input placeholder="Search Businesses" />
          <input placeholder="Where?" />
        <div className="SearchBar-submit">
          <a>Lets Go</a>

export default SearchBar;

Essentially, I’m struggling with the changes I need to make to the renderSortByOptions method.

Any advice will be much appreciated. I’ll update this topic if I manage to fix the associated issue myself.

It’s OK. I realised that…

return <li className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>;

Needed a ‘this’, i.e.

return <li className={this.getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>;

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.