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


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>

class Foo extends React.Component {

  render () {
    return (
        { <Bar />: null}

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

ReactDOM.render(<Example/>, document.getElementById('app'));
<script src=""></script>
<script src=""></script>
<div id="app"></div>

Related Query

More Query from same tag