React Toggle Class Example

Shows how to toggle classes when interacting with an element.

by havisk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.woff2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/FontAwesome.otf"></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>

SCSS

.toggleButton{
  cursor:pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;   
}

.base-state{
  color:green;
}
.click-state{
  color:blue;
}

JavaScript 1.7

var ToggleButton = React.createClass({
  getInitialState: function() {
    return {
      clicked: false
    };
  },

  handleClick: function() {
  	if(this.state.clicked === false){
    	this.setState({clicked: true });
    }else{
    	this.setState({clicked: false});
    }
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    var checkClassName = this.state.clicked ? 'fa-check-square-o' : 'fa-square-o'
    return <div className={className+' toggleButton'} onClick={this.handleClick}><i className={'fa  '+checkClassName}></i> click here</div>;
  }
});

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