Ravenous part 4

Get Help React.js
#1

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:

Capture
Capture.PNG2802×632 79.2 KB

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!

#2

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

#3

see if it works by wrapping business with parentheses.

#4

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