Button state toggle

React.js Button state toggle example

by Denise Nepraunig

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var App = React.createClass({

	getInitialState: function(){
  	return {
    	active: true
    }
  },
  
  handleClick: function() {
  	this.setState({
    	active: !this.state.active
    });
  },
  
  render: function() {
  	var buttonSwitch = this.state.active ? "On" : "Off";
    
    return (
    	<div>
      	<p>Click the button!</p>
        <input type="submit" 
        	value="Toggle"
          onClick={this.handleClick} />
        <p>{buttonSwitch}</p>
       </div>
    );
  }
});

React.render(<App />, document.body);