Ravenous part 4 help

Hi, for part 4 of the ravenous project I am not getting any error pop ups, but when I try to use the “Let’s Go” button, nothing is happening.

Here are all my files, please and thank you:

App.js


import React from 'react';
import './App.css';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';
import Yelp from '../../util/Yelp';



class App extends React.Component{
  constructor(props){
    super(props);
    this.state={businesses:[]}
    this.searchYelp=this.searchYelp.bind(this);

  }
  searchYelp(term,location,sortBy){
    Yelp.search(term,location,sortBy).then(businesses=>{
      this.setState({business:businesses});
    })
  }
  render(){
    return(
      <div className="App">
  <h1>ravenous</h1>
  <SearchBar searchYelp={this.searchYelp}/>
  <BusinessList businesses={this.state.businesses}/>
    </div>
    )
  }
}

export default App;

Business.js

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




class Business extends React.Component{
    render(){
        return(
            <div className="Business">
  <div className="image-container">
    <img src={this.props.business.imageSrc} alt=''/>
  </div>
  <h2>{this.props.business.name}</h2>
  <div className="Business-information">
    <div className="Business-address">
      <p>{this.props.business.address}</p>
      <p>{this.props.business.city}</p>
      <p>{this.props.business.state} {this.props.business.zipCode}</p>
    </div>
    <div className="Business-reviews">
      <h3>{this.props.business.category}</h3>
      <h3 className="rating">{this.props.business.rating}</h3>
      <p>{this.props.business.reviewCount}</p>
    </div>
  </div>
</div>
        )
    }
}
export default Business;

BusinessList.js

import React from 'react';
import './BusinessList.css';
import Business from '../Business/Business';

class BusinessList extends React.Component{
    render(){
        return(
            <div className="BusinessList">
            {
            this.props.businesses.map(business=>{
                return <Business business = {business} key={business.id}/>
            
            })
            
            }
            </div>
        );
    }
}

export default BusinessList;
SearchBar.js

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



class SearchBar extends React.Component{
  constructor(props){
    super(props);
    this.state={term:'',location:'',sortBy:'best_match'};
    this.handleTermChange=this.handleTermChange.bind(this);
    this.handleLocationChange=this.handleLocationChange.bind(this);
    this.handleSearch=this.handleSearch.bind(this);
    this.sortByOptions={
      'Best Match':'best_match',
      'Highest Rated':'rating',
      'Most Reviewed':'review_count' 
    };
  }
  getSortByClass(sortByOption){
if(this.state.sortBy===sortByOption){
  return 'active';
}else{
  return '';
}
  }
  
  handleSortByChange(sortByOption){
    this.setState({sortBy:sortByOption})
  }
  handleTermChange(event){
    this.setState({term:event.target.value});
  }
  handleLocationChange(event){
    this.setState({location:event.target.value});
  }
  handleSearch(event){
    this.props.searchYelp(this.state.term,this.state.location,this.state.sortBy);
    event.preventDefault();
  }
    renderSortByOption(){
        return Object.keys(this.sortByOptions).map(sortByOption=>{
            let sortByOptionValue=this.sortByOptions[sortByOption];
            return (<li 
            className={this.getSortByClass(sortByOptionValue)} 
            onClick={this.handleSortByChange.bind(this,sortByOptionValue)} 
            key={sortByOptionValue}>{sortByOption}</li>
            )
        });
    }
    render(){
        return(
            <div className="SearchBar">
  <div className="SearchBar-sort-options">
    <ul>
      {this.renderSortByOption()}
    </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.handleSearch}>Let's Go</a>
  </div>
            </div>
        )
    }
}
export default SearchBar;
Yelp.js

const apiKey='8gubpT446Sk7FuGsCRVz01NiB71W571u78gU0fKLit--B_qAzcHSeXB28yr_mtRMVsUOg3AjWZNyVCfyeNX7VEeqiE8DindMIUSMcdwCqlh4jl_ayw9b0cQVZZWHXnYx'
const Yelp={
    search(term,location,sortBy){
        return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`
        ,{headers:{Authorization: `Bearer ${apiKey}`}}).then(response=>{
            return response.json().then(jsonResponse=>{
                if(jsonResponse.business){
                    return jsonResponse.business.map(business=>{
                        return {id:business.id,
                         imageSrc:business.image_url,
                         name:business.name,
                         address:business.location.address1,
                         city:business.location.city,
                         state:business.location.state,
                         zipCode:business.location.zip_code,
                         category:business.category.alias,
                         rating:business.rating,
                         reviewcount:business.review_count
                        }
                    })
                }
            })
        })
    }
};
export default Yelp;

Thank you for anyone in the future who helps :slight_smile:

Hey what’s up! Try checking the status response you are getting from the Yelp API in the network tab in the console. Also, try refreshing your API key. Hope this helps and good luck.

Nevermind, that didn’t work. I tried a new yelp API and still same error: GET 400(Bad Request).

Ok, that’s a step in the right direction. Now you know that your error is coming from how you are presenting the request to the API. Check the variables that are plugged in to the fetch method. I would recommend logging them to the console so you can see the info you are inputting to the request (maybe you have an undefined that is being passed in to the request or something of the sort). Additionally, here is my code for the fetch request which is working just fine:

  searchYelp(term, location, sortBy) {
    //Fetch info using CORS Anywhere API to bypass Cross Origin Resource Sharing restrictions and API Key
    return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
      headers: {
        Authorization: `Bearer ${apiKey}`
      }
    })

Thank you for taking time to help. I tried logging the inputs that I had and they appeared normally in the order they should be term,location,sortBy. Also, I noticed I am only getting the GET 400 (Bad Request) error when I don’t type in one or more of the fields in the search bar. But when I type everything in It doesn’t function, but no error message in the console.

No worries. So if you don’t type all the fields you’ll get a 400 response because of the undefined variable in the API request. If you define all the fields I am assuming you are now getting a 200 (OK) response. I am pretty sure I am seeing your problem and it is in the if statement of the json response. Try logging the json response so you see why the if statement is resolving to false rather than true.

Hi there,
Did you resolve your problem?
I came across it as I have got a very similar error coming up.
Having looked through your Yelp.js I see that in your if statement you have got

return jsonResponse.business.map(business => .........

I think it should be

return jsonResponse.businesses.map(business => ......

However, as I say, my code is still saying I’ve made a bad request so I haven’t got it quite right either!
I’d be interested to hear if you have resolved your issue though. I didn’t want to post my question as it overlaps with yours.
Let me know!

Hi! I think the mistake might be done in app.js at the setState part in searchYelp. It should be
this.setState({businesses:businesses}) while you wrote
this.setState({business:businesses})