hoc question

hoc.js

class MyComponent extends Component {
  render() {
    return (
      <div>
        <OutsideClick>
          <button onClick={toggleModal}>Show modal 1</button>
          { isModalVisible && this.renderModal(1) }
        </OutsideClick>
        <OutsideClick>
          <button onClick={toggleModal}>Show modal 2</button>
          { isModalVisible && this.renderModal(2) }
        </OutsideClick>
      </div>
    )
  }
  
  renderModal(type) {
    // render different things based on type
  }
}

hoc2.js

class MyComponent extends Component {
  render() {
    return (
      <div>
        <OutsideClick visibleState={this.state.modalVisible['1']} onOutsideClick={this.hideModal('1')} >
          <button onClick={this.toggleModal('1')}>Show modal 1</button>
          { this.state.modalVisible['1'] && this.renderModal('1') }
        </OutsideClick>
        <OutsideClick visibleState={this.state.modalVisible['2']} onOutsideClick={this.hideModal('2')} >
          <button onClick={this.toggleModal('2')}>Show modal 2</button>
          { this.state.modalVisible['2'] && this.renderModal('2') }
        </OutsideClick>
      </div>
    )
  }
  
  toggleModal(id) {
    return () => {
      this.setState({
        modalVisible: {
          ...this.state.modalVisible,
          [id]: !this.state.modalVisible[id]
        }
      })
    };
  }

  hideModal(id) {
    return () => {
      this.setState({
        modalVisible: {
          ...this.state.modalVisible,
          [id]: false
        }
      });
    };
  }
  
  renderModal(type) {
    // render different things based on type
  }
}