Topic: Modal react hooks support
*Expected behavior*Modal to work with props/react hooks
*Actual behavior*Infinite loop
Resources (screenshots, code snippets etc.)
function Providers(props) {
const [toggle, setToggle] = useState(props.toggle);
return (
<MDBContainer>
<MDBModal isOpen={toggle}>
<MDBModalHeader>XX</MDBModalHeader>
<MDBModalBody>(...)</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={setToggle(false)}>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
I can open the modal but not close it (when I add the code the infinity loop error appears).
Hi @gllermaly
Your component falls into an infinite loop because you call setToggle without function. You should use a function that will be called after click to change the state.
Please check this snippet. It should work:
function Providers(props) {
const [toggle, setToggle] = useState(false);
return (
<MDBContainer>
<MDBModal isOpen={toggle}>
<MDBModalHeader>XX</MDBModalHeader>
<MDBModalBody>(...)</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={() => setToggle(false)}>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
Let me know if my solution works with this matter.
Best regards,
Kuba
Hasi@14751033 commented 5 years ago
hello please can you suppose a way to make toggleCollapse work inside the navbar when using useState hook instead of class based navbar component
Piotr Glejzer staff commented 5 years ago
which toggleCollapse do you talking about?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.22.1
- Device: macbook pro
- Browser: chrome
- OS: macos mojave
- Provided sample code: No
- Provided link: No