Ravenous Part 3 Sort Options are not appearing above the search bar

Hi everybody!
I’m on ravenous part 3 & I just discovered that the sort by options isn’t appearing above the search bar for some reason. Am I going wrong somewhere? Here is my code(SearchBar.js & SearchBar.css)
SearchBar.js:


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



class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.state = ({
        location: '',
        term: '',
        sortBy: 'best_match'
      });
       this.sortByOptions = {
        'Best Match': 'best_match',
        'Highest Rated': 'rating',
        'Most Reviewed': 'review_count'
      };
    };
    getSortByClass(sortByOption) {
      if(this.state.sortBy === sortByOption) {
        return 'active';
      } else {
        return '';
      }
    }
    renderSortByOptions() {
        return Object.keys(this.sortByOptions).map(sortByOption => {
            let sortByOptionValue = this.sortByOptions[sortByOption];
            return <li keys={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;

SearchBar.css:


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

Until a reply comes, I’ll continue the ravenous project.
Thanks everyone!

Hello, In SearchBar.js in your render function, you’ll have to call this.renderSortByOptions(). This would be at line 38 or so… you’ll have to change {this.renderSortByOptions} to {this.renderSortByOptions()} :slight_smile: