I'm very new to react native and working with APIs. I'm trying to build an app that gets nearby restaurant data from the Yelp API and displays to the user. However, the data won't seem to save correctly to my array cause it only shows up as an empty array in the console window. However, my call to the api shows that I'm retrieving data, I just don't think I'm storing it right.
yelp.js:
function searchBusinesses(param) {
let opt = {
method: 'GET',
url: searchURI.concat('search'),
params: (param)? param : defaultParameters,
headers: authHeader
}
axios.request(opt)
.then((response) => {
console.log('Restaurants', response.data.businesses);
console.log(response.status);
return response.data.businesses;
})
.catch((err) => {
console.error(err);
});
}
} export default { searchBusinesses };`
SearchRestaurants.js:
class PickRestaurants extends Component {
constructor(props) {
super(props);
this.state = store.getState();
this.state = {...this.state
restaurant: [],
};
};
componentDidMount() {
let results = YelpAPI.searchBusinesses();
this.setState({restaurant: results});
console.log('RESULTS:', this.state);
}
render() { const config = { velocityThreshold: 0.3,
directionalOffsetThreshold: 80
};
return (
<View style={[styles.container, chooseButtons.container]}>
<View style={chooseButtons.restaurantContianer}>
<Text> restaurant info: { this.state.restaurant.name } </Text>
<Text> Img URL: {this.state.restaurant.image_url} </Text>
</View>
</View>
);
}
All I see on console is: RESULTS [] and nothing displays in the app either.
I want the data to store in the array so I can print it in my app.
Thank you