CODEWITHSUNDEEP
reactjsmaterial-ui
TheLearner
TheLearner

Reputation: 2863

Material dialog showing despite display="none"

In my simple Dialog component, I'm using React state to toggle between two views:

const SignInDialog = (props) => {
  const {
    classes, pageURL, handleClose, open, setOpen
  } = props;

  const [displaySignIn, setDisplaySignIn] = useState('inherit');
  const [displaySignUp, setDisplaySignUp] = useState('none');
  const toggleSignUp = () => {
    setDisplaySignIn('none');
    setDisplaySignUp('inherit');
  };
  const toggleSignIn = () => {
    setDisplaySignUp('none');
    setDisplaySignIn('inherit');
  };

  return (
    <Dialog
      maxWidth="xs"
      open={open}
      onClose={handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title" className={classes.dialogTitle}>Sign in</DialogTitle>
      <DialogContent component="div" display={displaySignIn}>
        <DialogContentText>
          SIGN IN
          <Button color="inherit" onClick={toggleSignUp}>Sign up</Button>
        </DialogContentText>
      </DialogContent>
      <DialogContent component="div" display={displaySignUp}>
        <DialogContentText>
          SIGN UP
          <Button color="inherit" onClick={toggleSignIn}>Sign in</Button>
        </DialogContentText>
      </DialogContent>
    </Dialog>
  );
};

As can be seen, the idea is to show only the SIGN IN element upon load. In this view, there's a button clicking which should toggle in the SIGN UP view. However, when run, the code shows both elements in the browser. The SIGN-UP block which should be hidden shows up despite the display property being set to "none":

<div class="MuiDialogContent-root" component="div" display="inherit">...</div>
<div class="MuiDialogContent-root" component="div" display="none">...</div>

Shouldn't the second <div> block be hidden instead?

Upvotes: 0

Views: 617

Answers (1)

Domino987
Domino987

Reputation: 8774

DialogContent does not have a prop display. That is why you see both, because it is just ignored. You should change displaySignIn and displaySignUp to be a boolean and use a ternary operator like this:

{displaySignIn && <DialogContent component="div">
    <DialogContentText>
      SIGN IN
      <Button color="inherit" onClick={toggleSignUp}>Sign up</Button>
    </DialogContentText>
  </DialogContent>}
  {displaySignUp && <DialogContent component="div">
    <DialogContentText>
      SIGN UP
      <Button color="inherit" onClick={toggleSignIn}>Sign in</Button>
    </DialogContentText>
  </DialogContent>}

To toggle between these two states.

Upvotes: 2

Related Questions