Cacher is the code snippet organizer for pro developers

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { modal } from '../../../actions/modal';

class Status extends Component {
  constructor(props) {
    super(props)

    //I get a `status` variable from a global variable on another part of my system.
    this.state = {
      status
    }

    this.openTMMESwitchModal = this.openTMMESwitchModal.bind(this);
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentWillMount() {
    if(this.state.status) {
    this.status = "checked";      
    }

  }
  handleStatusChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

     this.setState({
       [name]: value
     });
   }

  openTMMESwitchModal() {
    this.props.modal({
      type: 'SHOW_MODAL',
      modalType: 'TMME_SWITCH',
      modalProps: {}
    })
  }

  render() {
    return (
      <div className="slds-col slds-size--1-of-1 slds-medium-size--1-of-3 slds-large-size--1-of-3">
        <div className="slds-align--absolute-center slds-text-align--center">
          <div className="slds-form-element">
            <label className="slds-checkbox--toggle slds-grid">
              <span className="slds-form-element__label slds-m-bottom--none">Status</span>
              <input onClick={ this.openTMMESwitchModal } type="checkbox" ref={(input) => { this.status = input; }} onChange={this.handleStatusChange} name="status"/>
              <span id="toggle-desc" className="slds-checkbox--faux_container" ariaLive="assertive">
                <span className="slds-checkbox--faux"></span>
                <span className="slds-checkbox--on">Enabled</span>
                <span className="slds-checkbox--off">Disabled</span>
              </span>
            </label>
          </div>
        </div>
      </div>
    );
  }

}

export default connect(null, { modal } )(Status);