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


#1

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.


#2

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


#4

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


#5

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 }) })


#6

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

Thank you.


#7

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


#9

I am now getting the following error:


#10

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.


#11

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


#12

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.


#13

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.


#14

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?


#15

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


#16

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


#17

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


#18

Perfect. Thanks again!!