score:1

One of possible solutions is to use some kind of message bus or pubSub. In that kind of approach, Bar component would have to subscribe to the bus, and show/hide itself. Foo component would publish appriopriate messages in componentWillReceiveProps. More: here

score:2

One simple solution is to use Bar component inside of the Foo component and render that based on a ternary condition.

Also return a JSX element(Valid react element from Bar component) rather than a string.

const Example = () => {
  return (
    <Foo bar={true}>
      <div>some div</div>
    </Foo>
   
  )
};

class Foo extends React.Component {

  
  render () {
    return (
      <div>
        <div>{this.props.children}</div>
        {this.props.bar? <Bar />: null}
      </div>
    )
  }
};

const Bar = () => <div>I am some bar</div>;

ReactDOM.render(<Example/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>


Related Query

More Query from same tag