Ravenous Project

Hi just got to the last step of the ravenous project and I keep getting an error…

Unhandled Rejection (TypeError): Cannot read property ‘map’ of undefined

This was such a headache to me that I literally went and downloaded the solution, copy pasted the code and still am getting the same error. Help please I literally just want to know why this is happening

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;

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 onClick={this.handleSearch}>Let's Go</a> </div> </div> ); } } export default SearchBar;

Yelp.js

const apiKey = ''; // Insert API key here. 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.categories[0].title, rating: business.rating, reviewCount: business.review_count })); } }); } }; export default Yelp;

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 key={business} business={business} />; })} </div> ); } } export default BusinessList;

any help would be so much appreciated thanks

1 Like

So I do notice there’s a this.props.business.map in there (it’s a little hard to read the codebytes) so I presume that means that this.props.business is undefined.

I have run into problems previously where a project has relied on an API to a big service (here it looks like yelp) when they’ve changed something on their end, and then projects like these don’t work any more.

I guess the best thing would be to break it all down to troubleshoot. Check that you’re actually getting a json response from yelp and look at what the data is, and then build things back up from there.