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.
https://github.com/JamesBerryman/ravenous

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) {
    super(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);
      e.preventDefault();
    }
  }

  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">
          <ul>
            {this.renderSortByOptions()}
          </ul>
        </div>
        <div className="SearchBar-fields">
          <input onChange={this.handleTermChange} placeholder="Search Businesses" />
          <input onChange={this.handleLocationChange} placeholder="Where?" />
        </div>
        <div className="SearchBar-submit">
          <a onClick={this.handleSearchClick} href="foo" >Let's Go</a>
        </div>
      </div>
    )
  }
}

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,
https://www.yelp.com/developers/documentation/v3/business_search

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,

https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}

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

1 Like