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

[designwhiz85404]

Hello,

Could you tell me what is wrong with my code?

Thank you!

Entire CODE of 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;

ENTIRE CODE OF 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;

[mtf]

Arrow functions do not have this in their prototype. Could that be the problem?

[designwhiz85404]

Hello Thanks for replying. I think the error message is saying that there’s an error with map. When I remove the this, a different error appears.

[mtf]

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

Arrow function works as expected.

  searchYelp(term, location, sortBy) {
    Yelp.search(term, location, sortBy).then(businesses => {
      this.setState({businesses: businesses});
    });
  }

Not so sure this one is going to work. I’d be surprised and as it would turn out, ill informed if it does.

... .then (function (businesses) {
        // this.setState ... is exposed in a function literal.
    });