Closing a react bootstrap modal with escape key

Question

I have 6 buttons which, when clicked, activate a modal. This is written in React.

//Since I have 6 different modals, giving each of them an id would distinguish them
onCloseModal(id) {
    this.setState({
        open: false,
        modalShown: id
    })
}

render() {
    return (
        <Modal onHide={this.onCloseModal.bind(this, item.id)} keyboard={true}>
            <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}>
            </Modal.Header>
        </Modal>
    )
}

I have keyboard={true}, which according to the documentation at https://react-bootstrap.github.io/components.html#modals-props, pressing the Escape key would exit the modal. It isn't working however. I believe that I have everything set up because each of my buttons has a unique ID - why isn't the escape key responding?

Here's an image of the modal in action.

Answer 1

It appears that your component state isn't properly representing the state of the modals. I wrote you an example (which might not be best practice?) that shows how you can handle the state in a more specified way.

onCloseModal() {
  this.setState({
    modalShown: 0
  })
}

onShowModal(id) {
  this.setState({
    modalShown: id
  })
}

checkModal(id) {
  if (id == this.state.modalShown) {
    return true;
  } else {
    return false;
  }
}

<Modal show={this.checkModal(item.id)} onHide={this.onCloseModal.bind(this)}</Modal>