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
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
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…