Ravenous III Project Help


#1

Hello,

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’.

https://www.codecademy.com/courses/ravenous/projects/setting-searchbar-state?program_content_id=5fe061937ce47fef67b4972a34a0ebbb&program_id=3741d64c939020a6d8549ca8d434318e

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
./src/components/SearchBar/SearchBar.js
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) {
    super(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) {
    this.setState({
      sortBy: sortByOption
    })
  }

  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>Lets Go</a>
        </div>
      </div>
    );
  }
};

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.


Help Required
Ravenous - Project Help
#2

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

#3

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