colinmegill/state.html

## state.html
<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  </style>
  <script src="http://fb.me/react-0.12.2.js"></script>
  <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>

  <script type="text/jsx">

      var Recipe = React.createClass({
        getInitialState : function() {
          return {
            color : "darkred",
            fontSize : 14
          };
        },
        handleColorChange: function (e) {
          this.setState({
            color: e.target.value
          })
        },
        handleSizeChange: function (e) {
          this.setState({
            fontSize: e.target.value
          })
        },
        render : function() {
          return (
            <div>
            <input onChange={this.handleColorChange}/>
            <input onChange={this.handleSizeChange} />
            <p
              style={{
                color: this.state.color,
                fontSize: this.state.fontSize
              }}
            >
            This paragraph is {this.state.color} and {this.state.fontSize} px
            </p>
            </div>
          )
        }
      });

      React.renderComponent(
        <Recipe />,
        document.body
      );

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	</style>
	<script src="http://fb.me/react-0.12.2.js"></script>
	<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
	</head>
	<body>

	<script type="text/jsx">

	var Recipe = React.createClass({
	getInitialState : function() {
	return {
	color : "darkred",
	fontSize : 14
	};
	},
	handleColorChange: function (e) {
	this.setState({
	color: e.target.value
	})
	},
	handleSizeChange: function (e) {
	this.setState({
	fontSize: e.target.value
	})
	},
	render : function() {
	return (
	<div>
	<input onChange={this.handleColorChange}/>
	<input onChange={this.handleSizeChange} />
	<p
	style={{
	color: this.state.color,
	fontSize: this.state.fontSize
	}}
	>
	This paragraph is {this.state.color} and {this.state.fontSize} px
	</p>
	</div>
	)
	}
	});

	React.renderComponent(
	<Recipe />,
	document.body
	);

	</script>
	</body>
	</html>