React child renders before parent

Question

I am making a WeatherApp for freecodecamp. I have made a parent class for getting the geolocation and then pass the value of coordinates to Fetch.js, the problem is when i run the program the console shows that Fetch is likely being executed first,

ie, on the console , First the data shows an empty object for Fetch.js and then the console shows the geolocation i printed in Geolocation.js

Parent Class : Geolocation.js

import React from 'react';
import Fetch from './Fetch';

class GeoLocation extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      lon : null,
      lat : null
    };
    this.showPosition = this.showPosition.bind(this);
  }
   componentDidMount(){
     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(this.showPosition);
     } else {
          console.log("Geolocation is not supported by this browser.");
     }
   }
  showPosition(position) {
    this.setState({lon:position.coords.latitude,lat:position.coords.longitude})
    console.log(this.state);
   }
   render(){
     return (
       <div>
       <Fetch lon={this.state.lon} lat={this.state.lat} />
       </div>
     )
   }
}
export default GeoLocation;

Fetch.js :

import React from 'react';
import LocalWeather from './LocalWeather';
import Icon from './Icon';

class Fetch extends React.Component{
  constructor(props){
    super(props);
    this.state = {};
    this.selectHandler = this.selectHandler.bind(this);
    this.setStateAsync = this.setStateAsync.bind(this);
  }
  setStateAsync(){
    return new Promise((resolve)=>{
      this.setState(this.state,resolve)
    })
  }
  async componentDidMount(){
    console.log(this.props.lat);
    if(this.props.lat && this.props.lon){
      const res = await fetch(`https://fcc-weather-api.glitch.me/api/current?lat=${this.props.lat}&lon=${this.props.lon}`);
      const {data} = await res.json();
      const temp =  data.main['temp'] ;
      const icon = data.weather[0].icon ;
      await this.setStateAsync({temp:temp,icon:icon});
      console.log(data);
    }
    else {
      this.setStateAsync({temp:'',icon:''});
      console.log('nothing');
    }
  }
  selectHandler(temp){
    this.setState({temp:temp})
  }
  render(){
    return(
      <div>
      <LocalWeather temp={this.state.temp} on_click={this.selectHandler} />
      <Icon src={this.state.icon ? this.state.icon : ''} />
      </div>
    )
  }
}

export default Fetch;

Answer 1

You can conditionally render Fetch by checking if the coordinates are already in the state:

<div>
  { this.state.lon && this.state.lat && <Fetch lon={this.state.lon} lat={this.state.lat} /> }
</div>