facing issue in passing state(loaded through api) from App Component through React Router

Question

I am facing issue in passing state from App Component through React Router. In the App component's ComponentwillMount function, the state is loaded through an API, which is passed to Login Component by specifying it in the render function of the Route Component.

But, the Login Component is loaded prior to App setState. I need to pass this state to all other Components. Please help !

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en',
      labels: null,
    };
  }
  componentDidMount() {
    let language = getLanguage(); //from url
    this.setState({ language }, async () => {
      await this.getLabels();
    });
  }
  getLabels = () => {
    //Hit Api to fetch labels on basis of language set
    this.setState({ labels: data });
  };
  render() {
    return (
      <div className='App'>
        <Router>
          <Switch>
            <Route
              exact
              path='/'
              render={(props) => (
                <Login labels={this.state.labels} {...props} />
              )}
            />
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;


import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    console.log(this.props.labels);
  }
}

this.props.labels is undefined in Login Component.

Answer 1

Can you try showing a loder untill your api call was successfull.

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en',
      labels: null,
      fetchingLabels:true
    };
  }
  componentDidMount() {
    let language = getLanguage(); //from url
    this.setState({ language }, async () => {
      await this.getLabels();
    });
  }
  getLabels = () => {
    //Hit Api to fetch labels on basis of language set
    this.setState({ labels: data, fetchingLabels:false });
  };
  render() {
    if(this.state.fetchingLabels){
      return 'I am loading'   // you can add your loader here
    }
    return (
      <div className='App'>
        <Router>
          <Switch>
            <Route
              exact
              path='/'
              render={(props) => (
                 <Login labels={this.state.labels} {...props} />
              )}
            />
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;


import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    console.log(this.props.labels);
  }
}