var Switch = React.createClass({
getInitialState: function() {
return {
on: false
};
},
toggleOnOff: function(e) {
this.setState({on: !this.state.on});
},
render: function() {
var text = this.state.on ? "ON" : "OFF";
var className = this.state.on ? "on" : "";
className += " button"
return <div className={className} onClick={this.toggleOnOff}>{text}</div>;
}
});
React.render(<Switch/>, document.getElementById("switch"));
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="switch"></div>
.button {
display: block;
height: 100px;
width: 100px;
border: 1px solid #aaa;
border-radius: 25px;
font: bold 20px Helvetica, Arial, sans-serif;
text-align: center;
line-height: 100px;
cursor: pointer;
color: #fff;
background-color: #000;
}
.button.on {
color: #00FF00;
background-color: #006600;
}
External resources loaded into this fiddle: