React Ravenous App


#1

I just completed the Ravenous app project in the React lessons. After each of the first three sections of the app project I got everything to work as it should. I have now finished the fourth part and all of my code compiles successfully but I’m getting an error message(“TypeError: Cannot read property ‘map’ of undefined”) in my BusinessList.js file that prevents it from loading in the browser. I’m stumped. Here is the offending code.

I found my initial error and fixed it, but now I’m getting this.

Objects are not valid as a React child (found: object with keys {alias, title}). If you meant to render a collection of children, use an array instead.
in h3 (at Business.js:20)
in div (at Business.js:19)
in div (at Business.js:13)
in div (at Business.js:8)
in Business (at BusinessList.js:13)
in div (at BusinessList.js:10)
in BusinessList (at App.js:27)
in div (at App.js:24)
in App (at src/index.js:7)

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


class BusinessList extends React.Component {
    render() {
        return (
            <div className="BusinessList">
                {
                    this.props.businesses.map(business => {
                    return <Business 
                        business={business} 
                        key={this.props.business.id} />
                    })  
                };
            </div>
        )
    }
}

export default BusinessList;

Specifically, it doesn’t like this map() function.

{
                    this.props.businesses.map(business => {
                    return <Business 
                        business={business} 
                        key={this.props.business.id} />
                    })  
                };

This is the rest of the code.
App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import BusinessList from './components/BusinessList/BusinessList.js';
import SearchBar from './components/SearchBar/SearchBar.js';
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.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}</h3>
                        <p>{this.props.business.reviewCount}</p>
                    </div>
                </div>
            </div>
        );
    }
};

export default Business;

SearchBar.js

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

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

class SearchBar extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           term: '',
           location: '',
           sortBy: 'best_match',
       };

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

}
    getSortByClass(sortByOption) {
        if (this.state.sortBy === sortByOption) {
            return 'active';
        } else {
            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();
    }
        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" onClick={this.handleSearch}>
                        <a>Let's Go</a>
                    </div>
                </div>
            );
        }
}

export default SearchBar;

And the Yelp.js without the API key.

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

export default Yelp;

Any help would be appreciated.
Thank you.


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.