I’m attempting to complete the Ravenous project using React functional components instead of class components. I’ve been able to complete every step except for loading the business list with the array of objects from the Yelp API.
I’m calling the Yelp API in my search bar component and I’m able to display the output in console, but I’m not able to export that result to App.js so I can pass it to my business list component. Does anyone have tips on how I can pass the list? Thanks
Hi there, welcome to the community!
It’s been a while since I’ve done the ravenous project, so apologies if I’m slightly off here. (@selectall is good with React, and I’m sure can correct me if I’m mistaken!)
You ought to have a Yelp component, in Yelp.js, which does the actual work of querying the API for your search terms. There’s a wrapper for that function in App.js, which is passed down to the SearchBar component as a prop.
The wrapper is the searchYelp() function defined in App.js. It makes a call to Yelp.search().
When your search bar calls the appropriate search function, it’s actually calling the function defined in - and bound to - the App component. As a result of this, when we return the appropriately formatted results from Yelp we are handing them back to the wrapper function we defined in App.js.
From there, you can use chaining to pass that list into this.setState(). Once you’ve done this, the change to the state causes the appropriate updates to the virtual DOM and invokes the appropriate render() to update your app.
I don’t think the behaviour is much different for function-based components, but again - it’s been a while since I did anything with React…