CODEWITHSUNDEEP
javascriptreactjsdialogmaterial-ui
Brian Rid
Brian Rid

Reputation: 45

REACT - Impossible to pop my DIALOG component onClick

Good morning everyone,

I am currently losing my calm, on the DIALOG component from Material UI.

At first, I would like to implement a simple DIALOG component apparition when I click on a bin Icon (from MUI library)

So for here is what I've done :

Initiating an open state :

  const [open, setOpen] = useState(false)

Implement handleOpen and handleClose methods :

     const handleClickOpen = () => {
    setOpen(true)
  }



const handleClose = () => {
    setOpen(false)
  }

Implement my bin Icon in a TableCell :

<TableCell>
  <DeleteIcon onClick={() => {handleDeleteUser()}}/>
  <EditIcon onClick={handleUpdateUser}/>
 </TableCell>

Pass a Method handleDeleteUser to handle the trigger of the DIALOG box

And then define my handleDeleteUser which is supposed to pop the component and open a Dialog component

Here is the method :

const handleDeleteUser = () => {
handleClickOpen()
console.log(open)
return(
  <Dialog
    open={open}
    onClose={handleClose}
    aria-describedby="alert-dialog-description"
  >
    <DialogContent>
      <DialogContentText id="alert-dialog-description">
        Êtes vous sur de vouloir supprimer cet utilisateur ?
        </DialogContentText>
    </DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="primary">
        Oui
        </Button>
      <Button onClick={handleClose} color="primary" autoFocus>
        Non
        </Button>
    </DialogActions>
  </Dialog>
)

}

My issue is the following :

I am able to enter the handleDeleteUser method and I am able to switch the open state from false to true. Unfortunately, I am not able to return the JSX and so to pop the dialog Box.

As I am a beginner in React and it's my first project using MUI, I am sure it's due to a lack of comprehension of how to use Dialog.

I hope you'll be able to help me!

Many thanks!

Upvotes: 1

Views: 2129

Answers (2)

uneet7
uneet7

Reputation: 3075

Don't return jsx from the handleDeleteUser method. In fact you don't need this method.

<TableCell>
  <DeleteIcon onClick={() => handleClickOpen()}/>
  <EditIcon onClick={handleUpdateUser}/>
 </TableCell>

Now assign the jsx to a variable

const DialogComponent = (
  <Dialog
    open={open}
    onClose={handleClose}
    aria-describedby="alert-dialog-description"
  >
    <DialogContent>
      <DialogContentText id="alert-dialog-description">
        Êtes vous sur de vouloir supprimer cet utilisateur ?
        </DialogContentText>
    </DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="primary">
        Oui
        </Button>
      <Button onClick={handleClose} color="primary" autoFocus>
        Non
        </Button>
    </DialogActions>
  </Dialog>
);

And use this variable directly inside the render/return method of the parent component function. The variable open will automatically hide the dialog and open the dialog for you. You don't need to return it from the function.

return (
  {DialogCOmponent}
)

Upvotes: 1

Dhruv Shah
Dhruv Shah

Reputation: 1651

The <Dialog> template should be present in the render function of the component from the begening. Returning the JSX from the handleDeleteUser function wouldn't help as it won't append the Dialog component to the DOM.

You just need to execute the handleClickOpen function from the handleDeleteUser funtion. And the Dialog template should already be present in the render part to render the dialog.

You may refer to the following sample code-sandbox that uses Dialog: https://codesandbox.io/s/jl06wm10q5

Upvotes: 0

Related Questions