Ravenous part 4 error

I keep getting this error message in my browser after I click the let’s go button. I can’t figure out what wrong.

TypeError: util_Yelp__WEBPACK_IMPORTED_MODULE_5_.default.searchYelp is not a function

App.searchYelp

C:/Users/hdemirci/ravenous2/src/App.js:23

    20 | this.searchYelp=this.searchYelp.bind(this)  
    21 | }; 
    22 | searchYelp(term, location, sortBy){
 > 23 |    Yelp.searchYelp(term, location, sortBy).then((businesses)=>{      
  24 |   ^ this.setState({businesses:businesses}); 
 25 |   })  
26 | 

View compiled

SearchBar.handleSearch

C:/Users/hdemirci/ravenous2/src/components/SearchBar/SearchBar.js:40

  37 | this.setState({location: event.target.value});  
  38 |   }  
   39 |   handleSearch(event){
> 40 |     this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);  
41 |     event.preventDefault();  
42 |   
43 |   }

View compiled

:arrow_forward: 19 stack frames were collapsed.

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the ‘X’ or hit ESC to dismiss this message.

<—Here is my code–>. for the first error

this.searchYelp=this.searchYelp.bind(this)

};

searchYelp(term, location, sortBy){

Yelp.searchYelp(term, location, sortBy).then((businesses)=>{

  this.setState({businesses:businesses});

})

<—here is my code for the 2nd error–>
handleLocationChange(event){

this.setState({location: event.target.value});

}

handleSearch(event){

this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);

event.preventDefault();

}

Post your Yelp.js file too, but be sure to use this so we can read the code in the forums:

image

1 Like
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.businesses){
                return jsonResponse.businesses.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.categories[0].title,
                    rating:business.rating,
                    reviewCount:business.review_count
                 } });
            }
        })
    }


};
export default Yelp;

here you go sorry about that thanks

In your Yelp object in Yelp.js, you named the method search().

However, in your App.js, you are trying to call the method Yelp.searchYelp() instead of Yelp.search()

1 Like

12 posts were split to a new topic: CORS Anywhere Issue with Ravenous Project