Search code examples
javascriptreactjsreactstrap

Dismiss reactstrap modal when clicking outside of it

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?

Solution

  • 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