Higher order component to toggle a prop value

withToggle.js

/**
 * Higher order component to toggle a prop value
 *
 * @see https://goo.gl/q7mQGm
 * @function withToggle
 * @returns Component
*/
export default function withToggle(WrappedComponent, propName = 'bool') {
  class WithToggle extends Component {
    constructor(props, context) {
      super(props, context);

      this.state = { bool: props[propName] };
      this.onToggleBool = this.toggleBool.bind(this);
    }
    toggleBool() {
      this.setState({ bool: !this.state.bool })
    }
    render() {
      // do not mutate props
      const newProps = Object.assign({}, this.props, {
        [`${propName}`]: this.state.bool,
        toggle: this.onToggleBool
      });

      return React.createElement(WrappedComponent, newProps);
    }
  }

  WithToggle.defaultProps = {
    [`${propName}`]: false
  };
  WithToggle.propTypes = {
    [`${propName}`]: React.PropTypes.bool
  };

  return WithToggle;
}