Pass total number of results from Yelp API call to React component - reactjs

Question

link to GitHub project: https://github.com/jkey774/codecademy-ravenous
I have been trying for a few days now to add a new feature to my little app that displays the total number of results for businesses retrieved from a Yelp API call. I can console.log(jsonResponse.total) just before mapping each business but am unsure how to set this up in the return statement to where jsonResponse.total from Yelp.js can be accessed in App.js to do something like setState({ total: total }). Do I need to make a separate API call just to get the total?
here is an example of what the response body looks like:
{
"total": 8228,
"businesses": [
{
"rating": 4,
"id": "E8RJkjfdcwgtyoPMjQ_Olg",
"review_count": 1738,
"name": "Four Barrel Coffee",
"image_url": "http://s3-media2.fl.yelpcdn.com/bphoto/MmgtASP3l_t4tPCL1iAsCg/o.jpg",
"location": {
"city": "San Francisco",
"state": "CA",
"address1": "375 Valencia St",
"zip_code": "94103"
}
},
// ...
]
}
in my Yelp.js file:
const Yelp = {
search(term, location, sortBy) {
const limit = 21;
return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}&limit=${limit}`, {
headers: {
Authorization: `Bearer ${apiKey}`
}
}).then(function (response) {
return response.json();
}).then(function (jsonResponse) {
if (jsonResponse.businesses) {
return jsonResponse.businesses.map(function (business) {
return {
id: business.id,
imageSrc: business.image_url,
name: business.name,
address: business.location.address1,
city: business.location.city,
state: business.location.state,
zipCode: business.location.zip_code,
category: business.categories[0].title,
rating: business.rating,
reviewCount: business.review_count
};
});
}
});
}
};
export default Yelp;
in my App.js file
import React from 'react';
import BusinessList from './components/BusinessList/BusinessList';
import SearchBar from './components/SearchBar/SearchBar';
import Yelp from './util/Yelp';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
total: 0,
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;

Answer 1

Welcome to Stack Overflow. As you mentioned, you can set multiple keys in a single call to setState, so all you have to do is get the total to your App.js.
In Yelp.js you need to return the total along with the list of businesses. You could do something like:
if (jsonResponse.businesses) {
return {
total: jsonResponse.total,
businessList: jsonResponse.businesses.map(function (business) {
// ... same code as you have before
Then, rework your setState just a little bit in App.js:
Yelp.search(term, location, sortBy).then((businessData) => {
this.setState({
businesses: businessData.businessList,
total: businessData.total
})
})