Ravenous: part 4

[ajaxblaster13790]

I get this Error when clicking the Let’s Go button
I have serched forums and watched the video but cant figure out whats wrong with my code

TypeError: Cannot read property ‘map’ of undefined

BusinessList.render

C:/webReact/codeacad/ravenous/src/components/BusinessList/BusinessList.jsx:13

  10 |   11 |  render() {  12 |    return (> 13 |      <div className="BusinessList">     | ^  14 |        {this.props.businesses.map(businesses => {  15 |          return <Buisness key={businesses.id} business={businesses} />;  16 |        })}

View compiled

17 stack frames were collapsed.

(anonymous function)

C:/webReact/codeacad/ravenous/src/App.jsx:18

  15 |   16 | searchYelp(term, location, sortBy) {  17 |   Yelp.searchYelp(term, location, sortBy).then(businesses => {> 18 |     this.setState({ businesses: businesses });     | ^  19 |   });  20 | }  21 | 

Here are my files
App.jsx

import React, { Component } from "react";
import "./App.css";
import BusinessList from "./components/BusinessList/BusinessList.jsx";
import SearchBar from "./components/SearchBar/SearchBar.jsx";
import Yelp from "./util/Yelp.js";

class App extends 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.js

const apiKey =
  "kN6dMOyHD_fTCFBsyT9e9FzLGVlz0L7ZSuOtF9ytCyGU9xyq60b_hw0-kiUt_h7WomX6xJufPeKBJyyn4I1zbNcwZ4c6vGQHUGwXxvuh1vZQaC5W7CeIQw3yDxfPXHYx";

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) {
          jsonResponse.businesses.map(business => {
            console.log(business);
            return {
              id: business.id,
              imgSrc: 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
            };
          });
        }
      })
      .catch(error => console.log(error));
  }
};

export default Yelp;

BusinessList.jsx

import React from "react";
import "./BusinessList.css";
import Buisness from "../Business/Business";

class BusinessList extends React.Component {
  state = {};
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="BusinessList">
        {this.props.businesses.map(businesses => {
          return <Buisness key={businesses.id} business={businesses} />;
        })}
      </div>
    );
  }
}

export default BusinessList;

[ajaxblaster13790]

Did a console.log inside of Yelp.js before the object is sent to App.jsx

const apiKey =
  "kN6dMOyHD_fTCFBsyT9e9FzLGVlz0L7ZSuOtF9ytCyGU9xyq60b_hw0-kiUt_h7WomX6xJufPeKBJyyn4I1zbNcwZ4c6vGQHUGwXxvuh1vZQaC5W7CeIQw3yDxfPXHYx";

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) {
          jsonResponse.businesses.map(business => {
            return {
              id: business.id,
              imgSrc: 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
            };
          });
        }
      })
      .then(beforeObjecIsSent => {
        console.log("beforeObjecIsSent ", beforeObjecIsSent);
      });
  }
};

export default Yelp;

Response of .then(beforeObjecIsSent => {
console.log("beforeObjecIsSent ", beforeObjecIsSent);
})

beforeObjecIsSent undefined

[ajaxblaster13790]

Found the problem, was missing return before

.then(jsonResponse => {
        if (jsonResponse.businesses) {
          **return** jsonResponse.businesses.map(business => {
            return {
              id: business.id,
              imgSrc: 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
            };
          });
        }
      });

[byteninja25111]

I had the exact same error, thanks!