Possuo um componente que preciso controlar quando o modal vai abrir/fechar, onde o componente pai é o componente que vai abrir o modal e o componente filho (que é o modal) vai fechar.
No meu componente pai, criei uma variável pra controlar quando vai abrir/fechar o modal:
const [openFullScreenModal, setOpenFullScreenModal] = useState(false)
No meu template do componente pai possuo um botão que altera o valor dessa variável para abrir o modal:
<button onClick={() => setOpenFullScreenModal(true)}>Abre modal</button>
e por fim, possui o componente modal:
<ModalFullScreen
title="Permissões do grupo"
onCloseModal={setOpenFullScreenModal()}
open={openFullScreenModal}
/>
No meu componente filho estou passando a propriedade open
com o valor da variável do componente pai e a propriedade onCloseModal
que ao fechar o componente filho (modal) deve alterar a variável openFullScreenModal do componente pai para false
.
No meu componente filho, recebo o valor de open através da props
e também possuo uma função para passar para o componente pai o valor false
ao clicar no botão fechar do meu modal:
const ModalFullScreen = (props) => {
const { title, FormComponent, open } = props
const handleClose = () => {
this.props.onCloseModal(false)
}
No template do meu modal, eu utilizo a propriedade open para definir quando for aberta e ao fechar, uso a função handleClose para passar para o componente pai o valor false para fechar o modal:
<Dialog fullScreen open={open} onClose={handleClose}>
Quando acesso o componente pai que possui o botão para abrir o modal, eu recebo diversos erros vindos do componente ModalFullScreen:
Too many re-renders. React limits the number of renders to prevent an infinite loop.
Como posso fazer pra corrigir este problema?