TypeError: this.props.businesses is undefined

I am doing ravenous project part 4 and constantly getting this error “TypeError: this.props.businesses is undefined” I went through code 2 3 times but I can’t see anything wrong. Here are my files:

App.js

import React from 'react';
import './App.css';
import SearchBar from './components/SearchBar/SearchBar';
import BusinessList from './components/BusinessList/BusinessList';
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 = "5lp4gs6bYKv-_cdsKRDyCUILGnB2yBVwjXbqj7ocAvJP9_mNQX2dtwfn6kkAQ1_8uTp_OLEKvwZDBYH6WjWB87Xxyt3yQyljtFz2YAlZO61wr-0glHGmmqh_Y0TzXnYx";
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.review_count
					};
				});
			}
		});
	}
};

export default Yelp;

And …

Put a console.log on Yelp.js (Line 7 console.log(jsonResponse))

Thanks man. I completely forgot to use $ in string interpolation as i said I’m newbie to this!
But I didn’t get why to log jsonResponse in Yelp.js?

Using console.log() for debugging, i.e checking/testing what values you should expect to see at any given point.

https://www.codecademy.com/courses/javascript-errors-debugging/lessons/debugging-code/exercises/console-log-debugging-ii

In this case if you were not seeing any data being returned then the problem was caused by something further up the code list.

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.