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

#1

12%20PM
Screen Shot 2018-06-18 at 7.29.12 PM.png1013x436 39.5 KB

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

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

#3

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.

#4

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.
    });
#5

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