Bootstrap button group toggle react js example

react-toggle.js

var ProjectForm = React.createClass({
  getInitialState: function() {
    return { headerText: 'nothing' }
  },
  handleToggleChange: function(value) {
    this.setState({ headerText: value.toUpperCase() })
  },
  render: function() {
    return (
      <form>
        <Toggle onChange={this.handleToggleChange} ref="toggle"/>
        { this.state.headerText }
      </form>
    )
  }
});

var Toggle = React.createClass({
  getInitialState: function() {
    return { role: 'owner' }
  },
  handleClick: function(e) {
    this.setState({ role: e.target.value });
    this.props.onChange(e.target.value);
  }, 
  render: function() {
    var classNames = {
      'owner':      'btn btn-default',
      'freelancer': 'btn btn-default',
      'connector':  'btn btn-default'
    }

    classNames[this.state.role] += ' active';

    return (
      <div id="role" className="btn-group" aria-label="Project role">
        <button 
          className={classNames.owner}
          type="button" 
          value="owner"
          onClick={this.handleClick}>
          Hiring manager
        </button>
        <button 
          className={classNames.freelancer} 
          type="button" 
          value="freelancer"
          onClick={this.handleClick}>
          Freelancer
        </button>
        <button 
          className={classNames.connector} 
          type="button" 
          value="connector"
          onClick={this.handleClick}>
          Connector
        </button>
      </div>
    );
  }
});

ReactDOM.render(
  <ProjectForm/>,
  document.getElementById('content')
);