Ravenous Part 4 - it doesn't search

[code7291664807]

Hello all,

I finished part 4 but then when it came to testing the site, once I click search, nothing happens so I went to “console” in “inspect” and I saw bunch of errors for every time that I had pressed on the search button. Can someone please tell me what they mean, or what have I done wrong and how I can fix it, please?

thank you

[selectall]

Hello,

You may not have an issue with your code at all. There are new restrictions in place for using the cors-anywhere.herokuapp.com service that’s being used in this project. You need to visit that link and click a button to temporarily allow the use of the service. After you click the button, you should be able to perform the search.

https://cors-anywhere.herokuapp.com/corsdemo

[code7291664807]

Great thank, much appreciated.
I did that so not getting those errors anymore. Although it’s giving me new errors which are in my code now, which only appear after I search for something

Just in case you’re interested, here they are:

[code7291664807]

I must add, that I have double checked my code with the available solutions and they are the same.

[selectall]

You can post your code in the forum if you’d like another set of eyes on it. You can either link a GitHub repository or you can use this forum option so the code is readable:

this.props.businesses is being set to undefined after you’re searching. Most likely there’s an issue in your Yelp.js or you’re searching for something Yelp can’t find and you end up changing the state of businesses to undefined

[code7291664807]

Hello,

Here are the codes for BusinessList.js and App.js
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;

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({businesses: businesses});
    });
  }

  render() {
    return (
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar searchYelp={this.searchYelp} />
        <BusinessList businesses={this.state.businesses} />
      </div>
    );
  }
}

export default App;

[selectall]

You need to post your Yelp.js file. You can remove the key.

[code7291664807]

Here is my Yelp file

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 => ({
          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;

[selectall]

I didn’t spot any issues in your code, so I copy/pasted all 3 into my project (using my API key). It worked fine when I searched for “Pizza” in “New York”

Is it possible you searched for something or a location that Yelp can’t find? The instructions for the project don’t include handling of errors or receiving no results. If it receives no results or encounters an error, undefined is returned. You’re free to add code to properly handle those situations.

[code7291664807]

Since you said it’s not my code, I went to Yelp page again and got my key again, copy/pasted it and now my page works, I think I might’ve messed up the key when I was changing details, somehow.

Thank you very very much for your help. Really grateful.

[selectall]

You’re welcome. Congrats on finishing the project!

[code7291664807]

Thank you! I can’t wait till I’m more comfortable with the whole thing. I still feel li8ke a toddler that can’t do anything unless I’m told what to do