Help with Ravenous: Part 4 please

Hi all,

I’ve been doing the Ravenous project but I’m getting an error right at the last part. When attempting to search for a business in a location I get the following error:

TypeError: _util_Yelp__WEBPACK_IMPORTED_MODULE_4__.default.searchYelp is not a function
App.searchYelp
C:/Users/mahip/eatNow/src/components/App/App.js:20
  17 | }
  18 | 
  19 | searchYelp(term, location, sortBy) {
> 20 |   Yelp.searchYelp(term, location, sortBy).then((businesses) => {
     | ^  21 |     this.setState({ businesses: businesses });
  22 |   });
  23 | }

my App.js is:

import React from "react";

import "./App.css";

import "../BusinessList/BusinessList";

import "../SearchBar/SearchBar";

import SearchBar from "../SearchBar/SearchBar";

import BusinessList from "../BusinessList/BusinessList";

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.searchYelp(term, location, sortBy).then((businesses) => {

      this.setState({ businesses: businesses });

    });

  }

  render() {

    return (

      <div className="App">

        <h1>eatNow</h1>

        <SearchBar searchYelp={this.searchYelp} />

        <BusinessList businesses={this.state.businesses} />

      </div>

    );

  }

}

export default App;

Any help will be appreciated.

Hi there, welcome back to the forums.

In case you need a refresher, you can see how to post properly formatted code on the forums here. I’ve edited your post to do this already, but it’d be good for any future questions as it makes it easier for us to be sure we’re reading or running your program exactly as you wrote it.

It’s great that you posted the code for your App.js component, however if you look at the React error you’ll see that the caret (^) is actually pointing to the line Yelp.searchYelp(term, location, sortBy).then((businesses) => {

If you’ve been following the instructions for Ravenous, then your Yelp.js file ought to contain a method named search()… As you’re referencing a method called searchYelp(), which exists in your App component but not the Yelp code.

You should check that the method you’re calling from the Yelp object, Yelp.searchYelp(), actually exists. I suspect that it does not, and that you simply need to change the name of the method you’re calling. :slight_smile:

Hello,

Thank you so much for the quick reply. I have saved the link regarding how to post formatted code so won’t make that mistake next time.

You were exactly right, the search function in my Yelp.js was named differently however I’ve now corrected it and everything is working. Also, moving forwards I’ll keep an eye on where the caret is pointing next time.

Once again, thank you for you help.

Mahipal

1 Like

No worries.

If you get stuck further along the course, come back and ask. We’ll try and help out where we can. :slight_smile: