How can I make a wrapper component mount before its child components?

Question

I'm trying to create a wrapper that does not mount the child if the user is not authenticated. Otherwise, it mounts and renders the child component. Roughly looks like this:

export class RedirectOnCondition extends Component {
  render(){
     return this.props.isAuthenticated? this.props.children : null
  }
}

My issue is the the child still mounts before the parent has a chance to evaluate the condition. It's only after the child's componentWillMount` (and any associated API calls have fired and failed) that the parent's render kicks in and remove's the child. According to this question this is how React works.

How can I get around this?

how does the parent evaluate condition? you can keep initial value of the condition false and make it true if user is authenticated. — Ajay Narain Mathur, Sep 25 '17 at 06:44
the condition is passed view redux connect, it is evaluating correctly, but as I said my issue is that the child mounts before the parent renders. I want to let the parent render first — Jad S, Sep 25 '17 at 06:50
We need more info on how are you actually using the RedirectOnCondition HOC and how this.props.isAuthenticated comes in — Shubham Khatri, Sep 25 '17 at 06:54

score 0 · Answer 1 · answered Sep 25 '17 at 06:57

In the first render, the parent component may have not yet received the props you need to process the conditional rendering of a children component. In this case, you may want to check first if the props is already there.

export class RedirectOnCondition extends Component {
 render(){
   return "isAuthenticated" in this.props ? this.props.isAuthenticated? this.props.children : null : null
 }
}

How can I make a wrapper component mount before its child components?

1 Answers1