Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

I\'m trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx:

import React from \"react\";
import PropTypes from \         


        

Answer 1

I also have the same problem, and the solution is I didn't bind the event in my onClick. so when it renders for the first time and the data is more, which ends up calling the state setter again, which triggers React to call your function again and so on.

export default function Component(props) {

function clickEvent (event, variable){
    console.log(variable);
}

return (
    

         clickEvent(e, 10)} // or you can call like this:onClick={() => clickEvent(10)} 
        >
    
)
}