- Forums
- react
- [SOLVED] Warning: Cannot update a component (`ContextProvider`) while rendering a different compone
This is my solution and how I was able to fix this annoying error in my React application: Too Many Re-renders. React Limits The Number Of Renders To Prevent An Infinite Loop. [5107], Last Updated: Mon Jun 24, 2024
dd
Fri Mar 24, 2023
1 Comments
1121 Visits
Solution:
To solve this problem, if you are using and onlclick event for example, you will need to add an arrow function
For example, change FROM this:
<Button variant="secondary" onClick={showModal(false)}>
Add and arrow function: ()=> so Change to this:
<Button variant="secondary" onClick={()=>showModal(false)}>
This was my Console Output of the warning error:
Warning: Cannot update a component (`ContextProvider`) while rendering a different component (`MyModal`).
To locate the bad setState() call inside `MyModal`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render MyModal@https://127.0.0.1:5173/src/views/log/MyModal.jsx?t=1679696892425:31:7
div
div
QuizHome
RenderedRoute@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2572:7
Outlet@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2820:3
main
div
div
DefaultLayout@https://127.0.0.1:5173/src/components/
DefaultLayout.jsx:31:7
RenderedRoute@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2572:7
RenderErrorBoundary@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2534:5
Routes@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2882:7
Router@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2833:7
RouterProvider@https://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=e8169f58:2725:7
ContextProvider@https://127.0.0.1:5173/src/context/
ContextProvider.jsx:32:32 react_devtools_backend.js:4012:25
Video: S7FeAKnPRFg