Ravenous - Part 4 Mystery Errors in BusinessList

Hello friends,

I keep getting the same error, and I’m bleary eyed trying to track the problem

This is a photo of the errors in my console

Here is a link to my gitHub.
https://github.com/SpiderMan2100/Ravenous

As always, thank you

Which element do you try to map in the component BusinessList? It is undefined. Without the code it is not possible to tell why.

This is the full contents of my BusinessList,js file


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;

this.props.businesses is not defined then. Which component renders ? Do you pass the props there?

Can confirm. 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;

I assume that you don’t get a valid result from the searchYelp method. If you comment out the method and the SearchBar component, do you still get the same error then?
If you don’t, comment both back in and log “businesses” inside the method.

I apologize, I’m sure I wasn’t clear enough.

The page loads, the button clicks, and that’s when the error happens.

I’ve narrowed it down to my fault. The answer can be downloaded, so I replaced everything old with the answer files, and it runs correctly.

I’m not sure what that solves, but it’s probably (definitely?) in my code.

Found it.

In Yelp.js, I forgot to add () to response.json in the first .then.

Thank you for coming with on the journey, I appreciate your time.

1 Like

Ok that confirms my assumption that you did not get a valid result from the searchYelp method then. Because that’s the one calling the Yelp.search method. Congats for fixing it.