Topic: Modal react hooks support
gllermaly free asked 4 years ago
*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).
Jakub Chmura staff answered 4 years ago
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 free commented 4 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 4 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
- ForumUser: 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