Ravenous: part 4

Get Help React.js
#1

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

:arrow_forward: 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;
2 Likes
#2

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

#3

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
            };
          });
        }
      });
8 Likes
Ravenous Part 4: Unhandled Rejection (TypeError): Cannot read property 'map' of undefined -
Ravenous: Part 4 error
#4

I had the exact same error, thanks!

1 Like
#5

Yaaaay you solved my life thanks!

#6

Same error as well…Wow!..thanks so much

#7

Spoke too soon…nevermind

#8 
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;

Still searching and still can’t seem to figure this error out. I’ve gone through other part4 posts on this ravenous project and I have seen many people stuck at the same spot but no solution presented. Can anyone help?

#9

Since the error msg is about trying to use .map on a prop it is possible that your error is not in the BusinessList component. This prop is passed down from App where it is stored in state. I would double-check (and maybe upload) the code in App as well as the Yelp.js file which is used for the AJAX request to get businesses.

#10

No problem…Here it is

const apiKey = 'JVMT49liTYvVKjOYkvx2F0Dtzl8ucmTjwf-XMrAoNAcBNI-O1ZrjTlWtg1tx7u4128Nlw5g0_3pMVQuSbEfZ-sAH9aCxol_iOMuHBPwxsdGFWHc--2L4Q8YQb5N0X3Y';

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) => {
            console.log(response)
        return response.json();
        }).then((jsonResponse) => {
            if (jsonResponse.businesses) {
               return jsonResponse.businesses.map((business) => {
                   console.log(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.zipCode,
                        category: business.categories[0].title,
                        rating: business.rating,
                        reviewCount: business.review_count,
                    };
                });
            }
        })
  
    }
};


export default Yelp;

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.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;
#11

I’ve been going back and forth through my app.js file and the yelp file as well searching for what I may have done wrong

#12

You can try to track down the issue with React Dev Tools for chrome browser and look to see if you are getting the state (businesses) updated in App. If the .map error is stopping the App from running then one possibility would be to comment the .map method out temporarily. It’s also possible that the issue is in the SearchBar component since that one is getting searchYelp (so perhaps upload that one as well) function as a prop. It was a while ago I did this project but checking if it works with a hard-coded state is another route to trouble-shoot (I forgot if this was already done).

#13

Double-check that your API key is correct. It looks slightly shorter than mine and could be missing a character, possibly on the end. The other code seems to work fine.

#14

Mike! Thanks so much. It was missing just one character…smh…Can’t believe it-BUT THANK YOU ONCE AGAIN

1 Like