Button counter

React.js Button counter 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 ButtonForm = React.createClass({

	render: function() {
  	return (
    	<div>
      	<input type="submit" 
        	value="Increase the counter"
          onClick={this.props.onUserClick} />
        <h3>You have pressed the button {this.props.counter} times!	
        </h3>
       </div>
    )
  }
});

var App = React.createClass({

	getInitialState: function(){
  	return {
    	counter: 0
    }
  },
  
  onUserClick: function() {
  	var newCount = this.state.counter += 1;
    
  	this.setState({
    	counter: newCount
    });
  },
  
  render: function() {
  	var buttonSwitch = this.state.active ? "On" : "Off";
    
    return (
    	<div>
      	<h1>Welcome to the counter app!</h1>
      	<ButtonForm counter={this.state.counter}
        	onUserClick={this.onUserClick} />
       </div>
    );
  }
});

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