medium_react_patterns_hybrid.jsx

export default class Collapsible extends Component {
  state = {
    // this state will be use by the uncontrolled component
    startCollapsed: this.props.startCollapsed || true,
  }

  // How to detect if it's controlled or not
  isControlled() {
    return typeof this.props.isCollapsed !== "undefined";
  }

  onClick() {
    // even if it is uncontrolled the consuming app
    // might be interested to know about this change
    if (typeof this.props.onClick === "function") {
      this.props.onClick();
    }
    
    if (!this.isControlled()) {
      this.setState({ startCollapsed: !this.state.startCollapsed });
    }
  }

  renderContent() {
    const {children} = this.props;

    // Decide base on the props what to do.
    // DO NOT try to sync the state, that might open the door for 🐛🐜🐜🐜 (BUGS)
    if (this.isControlled()) {
      return this.props.isCollapsed ? null : children;
    }

    return this.state.startCollapsed ? null : children;
  }

  render() {
    const {label, children} = this.props;
    return (
      <div className="collapsible">
        <div>{label}<button onClick={() => this.onClick()}>toggle</button></div>
        <div>{this.renderContent()}</div>
      </div>
    )
  }
}

medium_react_patterns_hybrid_how_to_use_it.jsx

// Uncontrolled
<Toggle label="Hybrid uncontrolled component 😎">
  🦄🎉⚡️🌶🍿🌴
</Toggle>

// Controlled
<Toggle
  onClick={() => this.setState({ isCollapsed: !this.state.isCollapsed})}
  isCollapsed={this.state.isCollapsed}
  label="Hybrid controlled component 😎"
>
  🍎🚀🙀💯
</Toggle>