Ravenous: Part 4 - Cannot read property 'setState' of undefined

Struggling a bit with completing the Ravenous project. Cannot seem to figure out what the issue is right now.

Currently getting the following:

Here is the entire App.js file:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import BusinessList from './components/BusinessList/BusinessList';
import SearchBar from './components/SearchBar/SearchBar';
import Yelp from './util/Yelp';

// const business = {
// 	imageSrc: 'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
//   name: 'MarginOtto Pizzeria',
//   address: '1010 Paddington Way',
//   city: 'Flavortown',
//   state: 'NY',
//   zipCode: '10101',
//   category: 'Italian',
//   rating: 4.5,
//   reviewCount: 90
// }

// const businesses = [
// 	business,
// 	business,
// 	business,
// 	business,
// 	business,
// 	business
// ]

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(function(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;

Thank you in advance. Would really love to complete this.

@alyssavigil, are there any React coaches who might be able to chime in on this?

1 Like

Upload your code to GitHub so we can see your Yelp file (and other necessary ones)

Zannain noted on Slack (and I agree) that your .then() should be an arrow function, to preserve the “this” that setState is referring to. Try .then(businesses => { this.setState({ businesses: businesses }) })

I changed to an arrow function to no avail. I have uploaded to GitHub:

Thank you.

Inside your search function inside your Yelp file console.log the response you get back from Yelp and see if you’re getting what you think

1 Like

I am now getting the following error:

Do console.log(jsonResponse.businesses) right under the line “if (jsonResponse.businesses) {” and tell me what it console logs. That’s what you’re trying to save to your state so lets see what it is exactly you’re getting at that point.

That would be line 13 in Yelp.js according to the file i can see on GitHub

I believe I may have solved it. Looks like my issue was within my jsonResponse.businesses.map. ‘category’ was set to category: business.categories, when it should have been category: business.categories[0].title

Does that sound right? The app seems to functioning now.

Ah! yes. Mind says “business.categories.title”. When I get funny results I console log the whole api response and see what exactly I’m trying to save and if it’s in the format I’m expecting.

Thank you so much for the help. While I have you here, one last question. What is making it so it only shows the first 20 results?

Probably yelp has a default limit and you’ll need to figure out how they paginate in order to get more.

Okay. Thank you. Really appreciate the help! :smiley:

1 Like

Their api docs say by default they return 20 and the max is 50 https://www.yelp.com/developers/documentation/v3/business_search

Perfect. Thanks again!!

Yours…

Video…

I don’t know if that’s the root of the error but give it a go!