Toggle

Toggle.js

import React from 'react';

// Toggle.js
class Toggle extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);

    this.state = {
      toggleOn: false,
      toggleOff: true,
    };
  }

  toggle() {
    const { toggleOn, toggleOff } = this.state;

    this.setState({
      toggleOn: !toggleOn,
      toggleOff: !toggleOff,
    });
  }

  render() {
    const { toggleOn, toggleOff } = this.state;

    return this.props.render({ toggleOn, toggleOff, toggle: this.toggle });
  }
}
  
// example
const Header = () => (
  <Toggle
    render={({ toggleOn, toggle }) => (
      <div className={classname({ open: toggleOn })}>
        <Menu onToggle={toggle} />
      </div>
    )}
  />
);

export default Header;