Change states between parent and child components with modal

Question

I have a component that I need to control when the modal will open/close, where the parent component is the component that will open the modal and the child component (which is the modal) will close.

In my parent component, I created a variable to control when to open/close the modal:

const [openFullScreenModal, setOpenFullScreenModal] = useState(false)

In my parent component template I have a button that changes the value of this variable to open the modal:

<button onClick={() => setOpenFullScreenModal(true)}>Abre modal</button>

and finally, it has the modal component:

<ModalFullScreen
   title="Permissões do grupo"
   onCloseModal={setOpenFullScreenModal()}
   open={openFullScreenModal}
/>

In my child component I’m passing the property open with the variable value of the parent component and the property onCloseModal that when closing the child component (modal) you must change the openFullScreenModal variable from the parent component to false.

In my child component, I receive the open value through props and I also have a function to pass the value to the parent component false by clicking the close button of my modal:

 const ModalFullScreen = (props) => {

    const { title, FormComponent, open } = props
    const handleClose = () => {
       this.props.onCloseModal(false)
    }

In my modal template, I use the open property to define when it opens and when it closes, I use the handleClose function to pass the false value to the parent component to close the modal:

<Dialog fullScreen open={open} onClose={handleClose}>

When I access the parent component that has the button to open the modal, I get several errors from the Modalfullscreen component:

Too Many re-renders. React Limits the number of renders to Prevent an Infinite loop.

How can I fix this problem?

Answer 1

Try to replace that stretch

<ModalFullScreen
   title="Permissões do grupo"
   onCloseModal={setOpenFullScreenModal()}
   open={openFullScreenModal}
/>

for

<ModalFullScreen
   title="Permissões do grupo"
   onCloseModal={setOpenFullScreenModal}
   open={openFullScreenModal}
/>

Note that in the second form we are providing the function reference so that when your child component runs the call this.props.onCloseModal(false) you are actually running the parent function reference (which is actually setOpenFullScreenModal).

What is probably occurring is that its parent component performs indefinite times the function setOpenFullScreenModal() when declared this way in its child component.

In the official React documentation there is an excerpt that explains how to bind a function to a component

I hope I’ve helped you