Parent-State-Child

by Ric Pumanes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class App extends React.Component {

  constructor() {
    super();
    this.state = { isLoggedIn: false };
  }
  
  _handleLogin() {
  	this.setState({ isLoggedIn: true });
  }
  
  _handleLogout() {
  	this.setState({ isLoggedIn: false });
  }
  
  render() {
  	const { isLoggedIn } = this.state;
    
  	return (
    	<div>
       {
       		isLoggedIn ?
         	<ChatBox logoutEvent={this._handleLogout.bind(this)} />
          :
          <Login loginEvent={this._handleLogin.bind(this)} />
       }
    	</div>
    );
  }
}

const Login = ({ loginEvent }) => (
	<button type="button" onClick={loginEvent}>Login</button>
);

const ChatBox = ({ logoutEvent }) => (
	<div>  
    <h1>This is the Chat Box!</h1>
    <button type="button" onClick={logoutEvent}>Logout</button>
  </div>
);

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