Closing a responsive modal bootstrap with an escape key

Question

I have 6 buttons that, when pressed, activate the modal. It 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 in https://react-bootstrap.imtqy.com/components.html#modals-props pressing Escape will exit the modal. However, it does not work. I believe that everything is configured for me, because each of my buttons has a unique identifier - why does the escape key not respond?

Here is a modal in action.

Answer 1

It seems that the state of your component does not correspond to the reality of the modals. I wrote you an example (which might not be the best?), Which shows how you can handle the state in a more specific 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>