Modal example isn't working

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Modal example isn't working

Josh Muir asked 6 years ago

I can't get the modal example working. I was doing something else with modals, but it wasn't working. I tried using the example. It appears to load (the elements are there) but they cannot be seen. Clicking anywhere on the page runs the 'Toggle' function, but nothing happens. Errors: Warning: Unknown event handler property `onExited`. It will be ignored. in div (created by Fade) in Fade in div (created by TransitionGroup) in TransitionGroup a.(anonymous function) raven.js:58 Warning: Received `true` for a non-boolean attribute `in`. If you want to write it to the DOM, pass a string instead: in="true" or in={value.toString()}. in div (created by Fade) in Fade in div (created by TransitionGroup) in TransitionGroup   Code: import React from 'react'; import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdb'; class ModalPage extends React.Component { constructor(props) { super(props); this.state = { modal: false }; this.toggle = this.toggle.bind(this); } toggle() { this.setState({ modal: !this.state.modal }); } render() { return ( <Container> <Button color="danger" onClick={this.toggle}>Modal</Button> <Modal isOpen={this.state.modal} toggle={this.toggle}> <ModalHeader toggle={this.toggle}>Modal title</ModalHeader> <ModalBody> (...) </ModalBody> <ModalFooter> <Button color="secondary" onClick={this.toggle}>Close</Button>{' '} <Button color="primary">Save changes</Button> </ModalFooter> </Modal> </Container> ); } } export default ModalPage; Thanks.

Mikołaj Smoleński staff answered 6 years ago

Hi there, We have now relased the new version of MDB React. The issue should be fixed. Best Regards

patatagrammar pro commented 6 years ago

Yes, that is true, this particular issue is fixed in 4.7.1 On the other hand, there are new issues, like https://mdbootstrap.com/support/react/collapsible-accordion-items-do-not-open-in-mdb-4-7-1/

Mikołaj Smoleński staff commented 6 years ago

Thanks for letting us know about it. Best Regards

Mikołaj Smoleński staff answered 6 years ago

Hi Josh, I've tested the following example and I'm sure it is working correct. Can You check if it is working in Your project? import React from 'react'; import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact'; class ModalPage extends React.Component { constructor(props) { super(props); this.state = { modal: false }; this.toggle = this.toggle.bind(this); } toggle() { this.setState({ modal: !this.state.modal }); } render() { return ( <Container> <h4 className="mt-4">Basic example</h4> <Button color="danger" onClick={this.toggle} >Modal</Button> <Modal isOpen={this.state.modal} toggle={this.toggle}> <ModalHeader toggle={this.toggle}>Modal title</ModalHeader> <ModalBody> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </ModalBody> <ModalFooter> <Button color="secondary" onClick={this.toggle}>Close</Button>{' '} <Button color="primary">Save changes</Button> </ModalFooter> </Modal> </Container> ); } } export default ModalPage; Best Regards  

Josh Muir commented 6 years ago

Hi. Thanks for your response. I'm still having the same issue. Are there any restricts with where modals can be placed within the document? Thanks.

Mikołaj Smoleński staff commented 6 years ago

Did You copy the whole code replacing Your existing code?

Josh Muir commented 6 years ago

Yep! I replaced all the code. Only thing I changed was the require statement. My modal is within a container though. Does this have an effect on it?

Mikołaj Smoleński staff commented 6 years ago

Container wrapper should not have effect on modal in typical usecase. Do You have any errors in console?

Josh Muir commented 6 years ago

Yep. Errors below. warning.js:33 Warning: Unknown event handler property onExited. It will be ignored. in div (created by Fade) in Fade in div (created by TransitionGroup) in TransitionGroup printWarning @ warning.js:33 warning @ warning.js:57 validateProperty$1 @ react-dom.development.js:7046 warnUnknownProperties @ react-dom.development.js:7138 validateProperties$2 @ react-dom.development.js:7158 validatePropertiesInDevelopment @ react-dom.development.js:7209 setInitialProperties$1 @ react-dom.development.js:7435 finalizeInitialChildren @ react-dom.development.js:8526 completeWork @ react-dom.development.js:14108 completeUnitOfWork @ react-dom.development.js:15713 performUnitOfWork @ react-dom.development.js:15890 workLoop @ react-dom.development.js:15902 renderRoot @ react-dom.development.js:15942 performWorkOnRoot @ react-dom.development.js:16560 performWork @ react-dom.development.js:16482 performSyncWork @ react-dom.development.js:16454 interactiveUpdates$1 @ react-dom.development.js:16719 interactiveUpdates @ react-dom.development.js:2150 dispatchInteractiveEvent @ react-dom.development.js:4532 warning.js:33 Warning: Received true for a non-boolean attribute in. If you want to write it to the DOM, pass a string instead: in="true" or in={value.toString()}. in div (created by Fade) in Fade in div (created by TransitionGroup) in TransitionGroup

Mikołaj Smoleński staff commented 6 years ago

Please send me Your zipped project (without node_modules) for check to m.smolenski@mdbootstrap.com. Best Regards

Mikołaj Smoleński staff answered 6 years ago

Hi Josh, I received Your project, but it doesn't look like CRA aplication. In my environment is not even starting. There must be an error in configuration of webpack. Please, follow our steps from quick start guide to be sure the components work correctly. Regards

patatagrammar pro answered 6 years ago

I have the same issue (pretty big and annoying issue). There are more people complaining: modal-doesnt-work-after-upgrading-to-pro The easiest way to fix it is to use reactstrap: reactstrap - modals Instead of import: import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact'; Just: import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'reactstrap'; The Modal code is the same, it should work.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Josh Muir
0Support score
3Questions 0Answers
0Snippets likes 0Snippets