How to receive props only after state of parent has updated?

Question

I'm trying to build a little weather widget, where the geolocation of the user is captured in one component and then passed onto a child component which fetches the weather data (based on the location) and then eventually renders an icon indicating the current weather conditions.

I'm passing the longitude and latitude state as props to my WeatherWidget. Unfortunately, the WeatherWidget also receives the initial state null. How I can I avoid that?

Thank you for your help!

class GetGeolocation extends Component{
    constructor(){
        super();
        this.state = {
            lngt: null,
            latd: null
        }

    }

    componentDidMount(){
        this.getLocation()
    }

    getLocation = () => {
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(position => {
                this.setState({lngt: position.coords.longitude.toFixed(4)});
                this.setState({latd:position.coords.latitude.toFixed(4)});
             }    
            );
        };
    }

    render(){
        return (
            <>
            <WeatherWidget lngt = {this.state.lngt} latd = {this.state.latd} />
            </>
        )
    }

class WeatherWidget extends Component{
    constructor(props){
        super(props);
        this.state = {
            weather:[]
        }
    }
    componentWillReceiveProps(nextProps){
        this.getWeather(nextProps)
    }

    getWeather = (location) => {

        console.log(location) 
        // The console logs twice:
        // First:
        //{lngt: "-12.3456", latd: null}
        //Then, the correct values:
        //{lngt: "-12.3456", latd: "78,9999"}



    }

score 1 · Accepted Answer · answered Sep 15 '19 at 01:32

Don't use componentWillReceiveProps, that will be deprecated in later versions of React.

But also, you can just setup conditional logic in your life-cycle methods to determine what code to execute.

componentWillReceiveProps(nextProps){
    //condition says if both value are truthy then run code.
    if(nextProps.lngt && nextProps.latd){
         this.getWeather(nextProps)
    }
}

You can also use componentDidUpdate()

componentDidUpdate(){
    //condition says if both value are truthy then run code.
    if(this.props.lngt && this.props.latd){
         this.getWeather(this.props)
    }
}

score 0 · Answer 2 · answered Sep 15 '19 at 01:37

One option is to conditionally render in the parent component:

class GetGeolocation extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      lngt: null,
      latd: null
    };
  }

  componentDidMount() {
    this.getLocation();
  }

  getLocation = () => {
    // Simulate the network request
    setTimeout(() => this.setState({ lngt: 100 }), 1000);
    setTimeout(() => this.setState({ latd: 100 }), 1000);
  };

  render() {
    const { lngt, latd } = this.state;
    if (!lngt || !latd) return null;

    return <WeatherWidget lngt={lngt} latd={latd} />;
  }
}

class WeatherWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      weather: []
    };
  }

  componentDidMount() {
    this.getWeather(this.props);
  }

  getWeather = location => {
    console.log(location);
  };

  render() {
    return null;
  }
}

How to receive props only after state of parent has updated?

2 Answers2