title: How can I remove a component using the children prop in React
body: <p>I am trying to achieve this scenario:</p>
  
  <ol>
  <li><p>I have <strong>Foo component</strong> with <strong>bar prop</strong></p></li>
  <li><p>If bar prop is <strong>true</strong> --> <strong>mount Bar component</strong> that is inside the Foo component</p></li>
  <li>if bar prop is <strong>false</strong> --> <strong>unmount Bar component</strong></li>
  <li><strong>I don't want Example component to be aware of this show/hide, I want only Foo to know when to show or hide it</strong></li>
  <li>Bar is not necessary a direct child of Foo, it can also be nested deeper in the children of Foo </li>
  </ol>
  
  <blockquote>
  <pre><code>const Example = () =&gt; {
    return (
      &lt;Foo bar={true/false}&gt;
        &lt;div&gt;some div&lt;/div&gt;
        &lt;Bar&gt;&lt;/Bar&gt;
      &lt;/Foo&gt;
    )
  };
  
  class Foo extends React.Component {
  
    componentWillReceiveProps({bar}) {
      if (bar) {
        /* I want to show bar!! */
      } else {
        /* I want to remove only bar!! */
        /* maybe doing something like: this.props.children.searchForBar().removeNode() */
      }
    }
  
    render () {
      return (
        &lt;div&gt;{this.props.children}&lt;/div&gt;
      )
    }
  };
  
  const Bar = () =&gt; 'I am some bar';
  </code></pre>
  </blockquote>
  
  <p>I've tried to manipulate this.props.children but React blocked me from modifying children myself. </p>
  
  <p>Do I need maybe an outer service for communication between these 2 components ? </p>
  
  <p>Should I use context maybe ? </p>
  
  <p>Looking for an advice on how to approach this issue. </p>