Ravenous Part 4 Help

Hi, I’ve gone through the Ravenous project and finished Part 4 and can’t get it to work.

I have uploaded everything to Github as I’ve gone through each step.

This is the error I’m getting:

Thanks in advance for any help you can provide. I’ve searched through the forums for an answer, googled a lot, and watched the video guides.

1 Like

Please check the browser’s console in the Developer Tool.

Maybe this is because your request has failed.
Check whether you get an error like:

GET https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=&location=&sort_by=best_match 400 (Bad Request)

That is the error that I am getting, anyway to remediate? Why is it a bad request?

My Error ended up being in the search bar, see below for the proper code.

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

class SearchBar extends React.Component {
  constructor(props) {
    this.state = {
      term: "",
      location: "",
      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";
    return "";
    //this.state.sortBy === sortByOption ? "active" : ""; -> raises ESLint error, can be fixed w/ if/else statement or disabling no-unused-expressions

  handleSortByChange = (sortByOption) => {
    this.props.searchYelp(this.state.term, this.state.location, sortByOption);
    this.setState({sortBy: sortByOption});

  handleTermChange = (e) => {
    this.setState({term: e.target.value});

  handleLocationChange = (e) => {
    this.setState({location: e.target.value});

  handleSearchClick = (e) => {
    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
    e.preventDefault(); //to prevent the default action of clicking a link from triggering at the end of the method

  handleSearchEnter = (e) => {
    if (e.key === "Enter") {
      this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);

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

  render() {
    return (
      <div className="SearchBar" onKeyPress={this.handleSearchEnter}>
        <div className="SearchBar-sort-options">
        <div className="SearchBar-fields">
          <input onChange={this.handleTermChange} placeholder="Search Businesses" />
          <input onChange={this.handleLocationChange} placeholder="Where?" />
        <div className="SearchBar-submit">
          <a onClick={this.handleSearchClick} href="foo" >Let's Go</a>

export default SearchBar;

Hi there,
I’ve got the same issue with you. Did you manage to resolve the issue? Any suggestions is appreciated. Thanks so much in advance!

Hi, according to the API documentation,

When you send a request to the /businesses/search endpoint, the location parameter is “required”.
So, please check your Yelp.js, make sure you are sending a request like this format,


Thanks so much for your reply! It turns out that it was an & missing in my Yelp.js! Now, it works :smiley:

1 Like