CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Danilo Cunha
Danilo Cunha

Reputation: 1288

Open and close Dialog using Props on ReactJS? My modal keeps open and don't close

I created a Dialog component that gets props from other component

        function ConfimationDialog(props)   {
            return (
                <Dialog           
                PaperProps={{style: {backgroundColor: props.colorBackground}}}
                open={props.modalName}
                onClose={props.cancelAction}
                >
                    <DialogTitle id="alert-dialog-title">{props.textTitle}</DialogTitle>
                    <DialogContent >
                        <DialogContentText id="alert-dialog-description">
                        {props.textDetail}
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>            
                        <Button variant="contained" onClick={props.confirmAction} color={props.buttonColor} >
                        {props.textConfirm}
                        </Button>
                        <Button variant="contained" onClick={props.cancelAction}  >
                        {props.textCancel}
                        </Button>
                    </DialogActions>
                </Dialog>
            )
        }

The component that calls the dialog:

        <ConfirmationDialog
            modalName=          'modalSaida'
            backgroundColor=    'primary'
            buttonColor=        'secondary'
            cancelAction=       {handleCancelar}
            confirmAction=      {handleConfirmar}

            textTitle=          'Você deseja remover os clientes que foram marcado?'
            textDetail=         'Você não poderá voltar atrás.'
            textConfirm=        'Confirmar'
            textCancel=         'Cancelar'
        />

The actions:

        const [modalSaida, setModalSaida] = React.useState(false);

        function handleCancelar()    {  
            setModalSaida(false);
        }    

        function handleConfirmar()    {  
            setModalSaida(false);
            dispatch(Actions.deleteClientes(props.idSelected));   
        }

But I just managed to make confirmAction work. The action that closes the modal simply doesn't work, making my modal open even when I start the app.

That cancelAction prop are getting in the Dialog component but the function is not being called

Upvotes: 0

Views: 684

Answers (2)

Danilo Cunha
Danilo Cunha

Reputation: 1288

Thanks to Dillan Wilding, that's the solution:

To work I just changed this:

modalName= 'modalSaida'

To this:

modalName= {modalSaida}

In here:

        <ConfirmationDialog
            modalName=          {modalSaida}
            backgroundColor=    'primary'
            buttonColor=        'secondary'
            cancelAction=       {handleCancelar}
            confirmAction=      {handleConfirmar}               
            textTitle=          'Você deseja remover os clientes que foram marcados?'
            textDetail=         'Você não poderá voltar atrás.'
            textConfirm=        'Confirmar'
            textCancel=         'Cancelar'
        />

Upvotes: 0

Dillan Wilding
Dillan Wilding

Reputation: 1121

I think your problem is you set the Dialog open property to the name when I think it's used as a boolean to determine if the dialog is open.

Source: https://material-ui.com/api/dialog/

Upvotes: 2

Related Questions