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

Projects Skill Path Projects
1

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!

2

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:

2 Likes