Ravenous part 4 getting error TypeError: Cannot read property 'map' of undefined

hi can someone help me with this im getting confused why im getting this error.

At some point, your App component’s businesses state is being set to undefined instead of an array, so when it passes it to your other components, they are still treating it like an array and use .map() on it, which generates the error.

Ultimately, your searchYelp() function in App.js is setting the value of businesses. It’s doing it based on what it gets from Yelp.searchYelp(). You probably need to confirm that you’re getting back what you expect by adding some logging temporarily. Are you getting back undefined when you expect a result? That’s often the case and means you need to dig into your Yelp.searchYelp() function to figure out why.

Optional part that should only be looked at once you're sure you're getting the results you expect

Sectioning this off to not add confusion.

Once you’re sure that you’re getting the right results, you can optionally handle getting no results. It isn’t covered in the steps of the project though so it isn’t required. If the search yielded no results, then you can either choose to have Yelp.searchYelp() return an empty array or you can have your App component’s searchYelp() method check if it’s undefined and set the state to an empty array if it is.

hi can you provide an example how to implement this.

thanks

Implement what? The optional part that I hid that should only be done once you know things are working already? Or do you mean something else?

yeah its working but im getting error with cors

hi i have added the following to the header request will this make a difference and can you explain or give me a link to docs that can help with understanding and implementing Cors.

thanks

Since you had this code in one of your screenshots already, here is a basic example of how it could be done from App.js (remember that this is optional and wasn’t covered in any steps)

  searchYelp(term, location, sortBy) {
    Yelp.searchYelp(term, location, sortBy).then((businesses) => {
      if (businesses) {
        this.setState({ businesses: businesses });
      } else {
        this.setState({ businesses: [] });
      }
    });
  }

But this doesn’t solve cors issues. It only deals with a scenario where Yelp.searchYelp() isn’t returning what you want, like if it has an error. You could handle it from inside that instead and return an empty array.

Not sure why you’re getting COS issues though. I tested mine with the same search term and location. Maybe you hit a rate limit temporarily on the cors-anywhere site? Not sure

You’ll cover CORS in other lessons about creating a backend. Your use of https://cors-anywhere.herokuapp.com/ in the URL of your request is supposed to bypass your need to worry about that right now.

Has your Yelp.searchYelp() function ever worked properly? I mean have you ever seen a console.log() of JSON returned by it before you started getting CORS issues?

If you’ve never seen it work, then I think there may be other things going on in your function that you need to address. If it used to work but you’ve been testing a lot, then it might be a temporary rate limit, but I’m not positive.

hi and thanks for the help, im really amazed at the response that im getting back instantly.