Ravenous part 4

Hello everyone,

I’m currently working on the last par of the ravenous project and I’m having difficulty with spotting a bug in my code:

Here is all my code for this project

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.searchYelp(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;

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 key={business.id} business={business} />
          })
        }
      </div>
    );
  }
}

export default BusinessList;

yelp.js

const apiKey = 'hI2QHbE_7X3gJMcrKBlHLhjbN3o5kQbB8AepQTES48G-87AqrS1Vmk_mT93dmfZAotAVS59oe8MW82nlqBe-yr40pZSd-1hEYbCBxc846qYX3Bt474HMZwbopfgxXXYx';

 const Yelp = {
    searchYelp(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.rating.reviewCount
                   }
               })
            }
        })
    }
}

export default Yelp;

I’ve gone through the video tutorial multiple times and I cant find the cause of the error. If anyone could offer some help/advice that would be greatly appreciated!

Of the code you posted, the comment above is the only error. It’s not causing your problem. Need to see Business.js.

see if it works by wrapping business with parentheses.

this is in your businessList.js, forgot to mention.