Ravenous: part 4 - TypeError: Cannot read property 'map' of undefined

Hi, I have seen other threads commeting on this same issue.
I have tried the solutions that worked for other users but I am still getting an error. I imagine the error I am getting is very generic and the solutions can be quite different.

This is the error:
ravenous_error

This is my code:
App:

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

import BusinessList from './components/BusinessList/BusinessList';
import SearchBar from './components/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.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;

Yelp:

const apiKey = 'LRGciAIdMeCXVoBr-trXao90V4nyJ_X142XorZckt1ioZAJ05gWaL0S7qqP1LZsG4yE7ipulfKy3uyzQl9T-rW0etGgG12JxrQGvScRz-r2mfLFaUQvVGGbZmjDqXnYx'

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 => {
                console.log(jsonResponse.businesses);
                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;

SearchBar:

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.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=>{
 var sortByOptionValue = this.sortByOptions[sortByOption];
 return <li className={this.getSortByClass(sortByOptionValue)} onClick={this.handleSortByChange.bind(this,sortByOptionValue)} key={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 onClick={this.handleSearch}>Let's Go</a>
   </div>
 </div>
     )
 }
 }
 
 export default SearchBar;

BusinessList:

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;

Business:

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



class Business extends React.Component{
    render () {
      const {business} = this.props;
        return (
            <div className="Business">
  <div className="image-container">
    <img src='https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg' alt=''/>
  </div>
  <h2>{business.name}</h2>
  <div className="Business-information">
    <div className="Business-address">
      <p>{business.address}</p>
      <p>{business.city}</p>
      <p>{business.state} {business.zipCode}</p>
    </div>
    <div className="Business-reviews">
      <h3>{business.category}</h3>
      <h3 className="rating">{business.rating} stars</h3>
      <p>{business.reviewCount} reviews</p>
    </div>
  </div>
</div>
        )
    }
}

export default Business;

Thanks in advance

Hi, welcome to the forums.

The backticks for code formatting need to be on the lines immediately before and after your code, not inline with the first/last line of code; otherwise, Markdown misinterprets the formatting and doesn’t show it correctly. (FYI).

The is telling you that it can’t call the .map() method of undefined, which looks to me like this.props.businesses might be the item which is undefined.

Look at where that’s being set, you might find your error. :slight_smile:

Hi, thanks for your answer and the tips.

Ii’s defined in the App component but not sure what the error is. I posted the code above, in case you can check.

Thanks

I am experiencing the same issue.

This is usually a cause of this problem.

In the code we are trying to generate/create custom URLs using fixed string portions (that don’t change) and combining them with variables (that are dynamic) that are converted to meaningful values and joining them altogether through string interpolation to give a custom URL (http).

And you should be using console.log(response) just before return response.json(); to check something is actually being returned from Yelp.

1 Like