how to make api call using props - reactjs

Question

im trying to make an api call in one component using state from a different component , however when i use props in the API call im getting an error saying cannot read property props of undefined. basicly im trying to make an api call using data from a different component in then display it in the main component , but am not sure how to do it. Can someone pls tell me what im doing wrong ? thanks for the help!
class App extends Component {
constructor() {
super();
this.state = {
places2: [] ,
isLoaded2: true,
isLoaded: true,
latitude: 37.774929,
longitude: -122.419416,
};
// this is the data i want to pass
geocodeByAddress(address)
.then(res => getLatLng(res[0]))
.then(({ lat, lng }) => {
this.setState({
latitude: lat,
longitude: lng,
});
})
.catch(error => {
this.setState({ isGeocoding: false });
console.log('error', error); // eslint-disable-line no-console
});
}
render() {
return (
<div id="h">
{this.state.isLoaded ?
<Health
latitude={this.state.latitude}
longitude={this.state.longitude}
parentMethod={this.parentMethod}
parentMethod2={this.parentMethod2}
/>
: <div>.</div>}
<Map center= {{lat: this.state.latitude, lng: this.state.longitude}}/>
{this.state.isLoaded ?
<div id="location-basic-info" >
<UserForm
address={this.state.address}
Latitude={this.state.latitude}
Longitude={this.state.longitude}
/>
</div> : <div>.</div>}
{this.state.isLoaded2 ?
<Health
latitude={this.state.latitude}
longitude={this.state.longitude}
parentMethod={this.parentMethod}
parentMethod2={this.parentMethod2}
/>
: <div>.</div>}
{this.state.isLoaded2 ?
<div id="location-basic-info" >
<div> {this.state.place} {this.state.places2} </div>
</div> : <div>.</div>}
</div>
<div>
</div>
</div>
);
}
};
export default App;
health.js
class Health extends Component {
constructor() {
super();
this.state = {
zoom: 13,
maptype: 'roadmap',
place_formatted: '',
place_id: '',
place_location: '',
address: '',
latitude: 37.774929,
longitude: -122.419416,
marker:[],
places: [], isLoaded: false,
places2: []
};
}
getplace(){
var param = {
//this is giving me the error
lat: this.props.latitude,
long: this.props.longitude,
temp:1
}
axios.post(`http://localhost:5000/search-champ`, {
param
}).then((data)=>{
this.setState({places: data});
console.log( this.state.places);
console.log(data);
const places = data.data.data[0].results.slice(0,10).map((place) => {
console.log(place.name)
console.log(place.geometry.location.lat)
console.log(place.geometry.location.lng)
let name = place.name;
let vicinity= place.vicinity;
return <div class="col-xs-6 col-sm-6">
<ul id="places-list">
<li><a onClick={() => this.hello(name, vicinity)}> {place.name} </a> </li>
</ul>
</div>
})
console.log('places', places);
const places2 = data.data.data[1].results.slice(0,10).map((place) => {
console.log(place.name)
console.log(place.geometry.location.lat)
console.log(place.geometry.location.lng)
let name = place.name;
let vicinity= place.vicinity;
return <div class="col-xs-6 col-sm-6">
<ul id="places-list">
<li><a onClick={() => this.hello(name, vicinity)}> {place.name} </a> </li>
</ul>
</div>
});
this.setState({ place: places , isLoaded: true});
this.setState({ places2: places2 , isLoaded: true});
})
}
render(){
return(
<div>
<ul class="nav nav-pills" id="f">
<li class="active" onClick={this.props.parentMethod}> Info</li>
<li onClick={this.props.parentMethod2}>Food</li>
<li onClick={this.getplace}>Health</li>
<li>Menu 3</li>
</ul>
{this.state.isLoaded2 ?
<div id="location-basic-info" >
<div> {this.state.places} {this.state.places2} </div>
</div> : <div>.</div>}
</div>
);
}};
export default Health;

Answer 1

Your call to the api must be in the componentDidMount method.
componentDidMount: This method is called once all our children Elements and our Component instances are mounted onto the Native UI
Simple life cycle:
class Example extends React.Component {
constructor()
{
console.log('constructor')
}
componentWillMount()
{
console.log('Pre-mounting ')
}
componentDidMount()
{
console.log('Post-mounting ')
//TODO: call api axios or fetch
}
render()
{
console.log('render ui')
return(....)
}
}
Also i saw something like that in your code:
render() {
// BAD: Do not do this!
this.setState({ place: places , isLoaded: true});
this.setState({ places2: places2 , isLoaded: true});
}
Happy coding!