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

I also get the same error at the end. But I have made everything as mentioned in the instructions.

If anyone could help me…?

Thank You.

Hello, @achchutha_rengan. There’s no way anyone can help you without seeing your code. The only thing I can suggest without seeing your code, is to use the error message to find your bug. If you are getting the same error as the OP, TypeError: Cannot read property 'map' of undefined then you need to look at where the thing you are calling .map() on was supposed to have been defined, and determine why it isn’t.

Hey I’m having trouble with this one now in fall 2020. .I am running into issues with my response, as it looks like this:

statusText: “Bad Request” …I think because you need to add another header to your fetch request, the ‘Access-Control-Allow-Origin’ header which allows your specific computer to make the request to cors-anywhere. Not sure but if anyone has any clarification, or knows how to implement that header correctly, that would be very helpful. I have installed npm cors-anywhere already aswell. I tried the following with no luck:

‘Access-Control-Allow-Origin’: ‘http://localhost:3000/
and
‘Access-Control-Allow-Origin’: ‘*’

Thanks!