React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const Img = (props) => {

  return (
    <div><img style={{ display: props.isShowing ? 'inline' : 'none', width: '100px' }} src="http://blog.nationalgeographic.org/wp-content/uploads/2010/04/Greatest-Nature-Photographs-of-All-Time-3.jpg" /></div>
  );
};

const Switch = (props) => {

  return (
    <div style={{ width: '50px', height: '50px', background: 'black', color: 'white'}} onClick={() => props.toggleImg()}>
    click me
    </div>
  );
};

class MasterComponent {
  constructor(outerThis) {
    this.outerThis = outerThis;
    this.toggleState = true;
    this.img = <Img isShowing={ true } />;
    this.switch = <Switch toggleImg={ () => this.toggleImg() } />;
  }

  toggleImg() {
    this.toggleState = !this.toggleState;
    this.img = <Img isShowing={ this.toggleState } />;
    this.outerThis.forceUpdate();
  }

}


class Example extends React.Component {
	constructor(props) {
		super(props);
  	this.masterComponent = new MasterComponent(this);
  }
  
  render() {
    return <div>
    {this.masterComponent.img}
    {this.masterComponent.switch}
    </div>;
  }
}



ReactDOM.render(
  <Example />,
  document.getElementById('container')
);