Ravenous part 4 bad request

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-four/projects/interacting-with-yelp-api

Hello,
I am having a problem similar to other people have had on the forums but I am going goggle eyed trying to make sense of this problem. I think it’s time to ask for some help with my code.
I get this problem:

TypeError: Cannot read property ‘map’ of undefined

Here is my code:
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 business={business} key={business.id} />;
      })
    }
     </div>
    );
  }
}

export default BusinessList;

SearchBar.js

import React from 'react';
import './SearchBar.css';

class SearchBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      term: '',
      location: '',
      sortBy: 'best_match'
    };

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleLocationChange = this.handleLocationChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleSortByChange = this.handleSortByChange.bind(this);

    this.sortByOptions = {
      'Best Match' : 'best_match',
      'Highest Rated': 'rating',
      'Most Reviewed' : 'review_count'
    };
  }

  getSortByClass(sortByOption){
    if (this.state.sortBy === sortByOption){
      return 'active';
     }
        return '';
    }

    handleSortByChange(sortByOption){
      this.setState({sortBy: sortByOption});
    }

    handleTermChange(event){
      this.setState({term: event.target.value});
    }

    handleLocationChange(event){
      this.setState({location: event.target.value});
    }

    handleSearch(event){
      this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
      event.preventDefault();
    }


  renderSortByOptions(){
    return Object.keys(this.sortByOptions).map(sortByOption => {
      let sortByOptionValue = this.sortByOptions[sortByOption];
      return (<li className={this.getSortByClass(sortByOptionValue)}
                key={sortByOptionValue}
                onClick={this.handleSortByChange.bind(this, sortByOptionValue)}>
                {sortByOption}
              </li>);
            });
          }


  render(){
    return(
      <div className="SearchBar">
        <div className="SearchBar-sort-options">
          <ul>
            {this.renderSortByOptions()}
          </ul>
        </div>
      <div className="SearchBar-fields">
        <input placeholder="Search Businesses" onChange={this.handleTermChange} />
        <input placeholder="Where?" onChange={this.handleLocationChange} />
      </div>
      <div className="SearchBar-submit">
        <a  href="www.#.com" onClick={this.handleSearch}>Let's Go</a>
     </div>
   </div>
  );
 }
}

export default SearchBar;

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.search(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;

Business.js

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

class Business extends React.Component {
  render (){
    return (
      <div className="Business">
        <div className="image-container">
          <img src={this.props.business.imageSrc} alt=''/>
        </div>
        <h2>{this.props.business.name}</h2>
        <div className="Business-information">
          <div className="Business-address">
            <p>{this.props.business.address}</p>
            <p>{this.props.business.city}</p>
            <p>{`${this.props.business.state} ${this.props.business.zipCode}`}`</p>
        </div>
        <div className="Business-reviews">
          <h3>{this.props.business.category}</h3>
          <h3 className="rating">{`${this.props.business.rating} stars`}</h3>
          <p>{`${this.props.business.reviewCount} reviews`}</p>
        </div>
      </div>
    </div>
    );
  }
}


export default Business;

Yelp.js

const apiKey = '63h9DgR-UVHpSuojUZ2uGSZdhOv-hkA3_u41bYIp5mBwEEVT_mn15p6fdzfFdy5o3UxKkCcOoKdEhf6nOX8Gb1UBH8wHMF4ZA-rqQGzKhpSvQ3inBxjqPlbfPuOXnYx';



const Yelp = {
  search(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 => ({
        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.title,
        rating: business.rating,
        reviewCount: business.review_count
        }));
      }
    });
  }
};

export default Yelp;

Many thanks in advance of any help or advice!!

Hey em. Check if your App state array is updating. The JsonResponse map method is not returning anything and has an extra set of parentheses. Here is an excerpt to validate your code with:

then(jsonResponse => {
      if(jsonResponse.businesses) { //Check if response is valid by making sure it has a businesses key
        return jsonResponse.businesses.map((business) => {
          return { //Object with valid values
            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,
          }
        });
      };
    })

Hello CxSG,
Thanks for your reply to my problem.
I have added the extra return and {}'s as suggested in your excerpt. However, I still am getting this error -
TypeError: Cannot read property ‘map’ of undefined in the BusinessList.render.
Any clues to what may be wrong?

BusinessList.render