How do I stop a component rendering before data is fetched?

Question

Currently in react I have to functions in the componentDidMount lifecycle method in which call action creators to which fetch data. The component uses the data however, dependin

Answer 1

You can't stop the render but you can give conditions to what to render.

Example

render() {
    if(this.props.hours. length <= 0 || this.props.trained.length <= 0 ) {
      return (
Loading...
);
    } else {
      let hours = parseInt(_.map(this.props.hours, 'hours'));
      let trained = _.map(this.props.trained, 'trained');
      return (
        

            

              

                
              
            
      )
    }