React Error (setState-in-render), when closing Modal after o


Topic: React Error (setState-in-render), when closing Modal after opening

pzauner asked 4 months ago

Expected behavior Opening and Closing modal without a warning in the console

Actual behavior

When opening a modal and closing it afterwards without focusing anything, I get a warning in the console.

Cannot update a component (Here is the name of the component, where the modal state is) while rendering a different component (il). To locate the bad setState() call inside il, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

If you need more of the message I can provide these.

I can prevent this by using focus on a input in the modal, but this only works once. But if I close the modal to fast, I also get the console warning.

I only get the warning once and then only after reloading the page. (After opening and closing the modal).

Resources (screenshots, code snippets etc.)

Error Image


PS: The error disappears, if I update to version 8.0.0, but then this problem occurs:

Modal Flickering when opened


Hello,The warning occurs because you're updating the state of a component while rendering another component. To fix this:Ensure you're not calling setState inside render.Use useEffect to update state after rendering.Avoid updating state in event handlers that fire during rendering.If the issue persists, please provide more code snippets or details for further assistance


pzauner commented 4 months ago

The Problem was fixed by updating MDBootstrap from 7.2.0 to 8.0.0. The Css Transition Error that appeared when opening a modal in Firefox is fixed in the corresponding question (Modal flickering when opend)


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 7.2.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes