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:


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 {
    this.state = {
      businesses: []
    this.searchYelp = this.searchYelp.bind(this);

  searchYelp(term, location, sortBy){
    Yelp.searchYelp(term, location, sortBy).then((businesses) =>{
      this.setState({ businesses: businesses });

      <div className="App">
        <SearchBar searchYelp={this.searchYelp} />
        <BusinessList businesses={this.state.businesses} />

export default App;


import React from 'react';
import './BusinessList.css';
import Business from '../Business/Business';

class BusinessList extends React.Component{
		return (
			<div className="BusinessList">
				this.props.businesses.map((business) =>{
					return <Business key={business.id} business={business} />;

export default BusinessList;


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) =>{
				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.


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.