I want the modal to close when clicking outside of it just like in the examples: https://reactstrap.github.io/components/modals/ but it doesn't happen:
https://codesandbox.io/s/x9rx5jx34q
Press the button and then click anywhere else and nothing happens. The same happens in my code.
I tried to add backdrop={true} as a prop for the modal but it didn't work.
So what does reactstrap uses in their examples?
Quoting what shinzou said as it happened to me as well:
If you set backdrop={true} you must also set toggle={fnToggle} otherwise it won't work.
You're missing bootstrap in your dependencies:
"dependencies": {
"react": "16.4.2",
"react-dom": "16.4.2",
"react-scripts": "1.1.4",
"reactstrap": "6.4.0",
"bootstrap": "4.1.1"
},
As stated in the documentation: https://github.com/reactstrap/reactstrap#adding-bootstrap
I modified your example here: https://codesandbox.io/s/m73w9j289
Use backdrop={'static'} in Modal, So that we control the outside click. Modal won't close on clicking outside of Modal.
Eg: <Modal isOpen={this.props.isOpen} toggle={this.props.toggleModal} backdrop={'static'}>