gistfile1.js

const StatelessToggler = (props) => (
  <div onClick={props.onToggle}>
    <div>{props.label}</div>
    {props.isOpen && props.children}
  </div>
)

const Toggler = React.createClass({
  getInitialState() {
    return { isOpen: false }
  },
  render() {
    const { isOpen } = this.state
    return (
      <StatelessToggler
        {...props}
        isOpen={isOpen}
        onToggle={() => (
          this.setState({ isOpen: !isOpen })
        )}
      />
    )
  }
})


////////////////////////////////////////////////////////////////////////////////
<Toggler label="America">
  <p>You don’t own me.</p>
</Toggler>

<StatelessToggler
  isOpen={globalState.togglers[i].isOpen}
  onToggle={() => (
    dispatchGlobalStateChange({ type: 'TOGGLE_TOGGLER_AT_INDEX', index: i })
  )}
  label="North Korea"
>
  <p>You own me</p>
</StatelessToggler>



////////////////////////////////////////////////////////////////////////////////
// or mimick controlled v. uncontrolled form controls
const Toggler = React.createClass({
  getInitialState() {
    return { isOpen: this.props.defaultIsOpen }
  },
  handleControlledClick() {
    this.props.onToggle()
  },
  handleClick() {
    this.setState({ isOpen: !this.state.isOpen }, this.props.onToggle)
  },
  render() {
    const isControlled = this.props.isOpen != null
    const isOpen = isControlled ? this.props.isOpen : this.state.isOpen
    const { label, children } = this.props
    return (
      <div onClick={isControlled ? this.handleControlledClick : this.handleClick}>
        <div>{label}</div>
        {isOpen && children}
      </div>
    )
  }
})