How do I unmount only one of the children in this.props.children

Question

So lets assume I have something simple that has a render with a return of:

<Sample>
    {this.props.children}
</Sample>

Now lets call this component Example and lets pass some child Props to it:

<Example>
  <ChildA />
  <ChildB />
</Example>

Now lets say I wanted to unmount (thus calling componentWillUnmount() ) ChildB . How would you go about doing it?

Answer 1

If you don't want to render ChildB , there is nothing you can do from Example (Parent component which takes what you pass as props.children). It just shows whatever is written inside this component.

// Parent component

<div> {this.props.children} </div>

// somewhere in your code, you imported Parent component and 

<Parent> Hello </Parent>

The point is this.props.children is only a way of saying if someone uses this component and if they put something in it , this component will show content where you put this.props.children. Nothing else. So this is not something Parent components do. They just show whatever the children are.

You question leads to another question : what if I want to show a component conditionally.

In this case you can do the following in your render methods :

{ yourConditionHere && <ComponentWhichWillMountIfConditionIsTrue /> } 

As a result, if your condition passes , your parent component which accepts children, will show this component or vice versa.