[Solved]-How can I make sure a React parent component loads data before its child component mounts?-Reactjs

You can integrate componentDidUpdate() and use it to render your child-components in a somewhat synchronous flow.

Let's say the structure of your Parent Component should look something like the following:

Parent

class Parent extends React.Component{
   state = {
      renderChildren: false
   }

   async componentDidMount() {
      await this.props.getEventTypes();
   }

   componentDidUpdate(prevProps){
      if(this.props.yourUpdatedReducer !== prevProps.yourUpdatedReducer){
         this.setState({
            renderChildren: true
         })
      }
   }

   render(){ 
       const { renderChildren } = this.state 
       return(
         { renderChildren ? <Child/> : "Loading" }
       )
   }
}

• You want a key in your state that determines whether you should render the Child component.
• In componentDidMount(), you call the action-creator function, when it completes, you get updated props.
• With updated props, you trigger componentDidUpdate(), where you check the values in your reducer. If the values are different that means you got the updated data from your database, so everything has loaded.
• Great, so now you want to mount your Child component, so you update-state, setting renderChildren to true, thus re-rendering the Parent component. Now Child gets rendered and should behave as expected.