Opening a Material-UI dialog modal from a Header parent component

Question

I have a header component separate from a Register dialog modal component. So like a parent an child components. I want to call the Register dialog (child) from the headerlink component (parent)

Here's my headerlinks component:

...
import Register from "../Register";
....

export default function HeaderLinks(props) {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <List className={classes.list}>
      <ListItem className={classes.listItem}>
        <Button
          color="transparent"
          className={classes.navLink}
          onClick={handleClickOpen}
        >
          Register
        </Button>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Button
          color="transparent"
          className={classes.navLink}
          
        >
          Log In
        </Button>
      </ListItem>
    </List>
  );
  <Register open={handleClickOpen} onClose={handleClose} />;
}

The Register dialog component was simply copied from Material-UI's documentation and removed the button.

export default function Register() {
  const [open, setOpen] = React.useState(false);

  const classes = useStyles();
  const theme = useTheme();

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Dialog
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Register
        </DialogTitle>
        <DialogContent dividers>
         ...content...
        </DialogContent>
      </Dialog>
    </div>
  );
}

When I click the Register button on the headerLink, nothing happens. Not sure what else I'm missing because there are no errors.

Answer 1

On your HeaderLinks, you've already returned a value on the function so the rest of source code below that will not execute.

return (
  <List className={classes.list}>
    ...
  </List>
);
<Register open={handleClickOpen} onClose={handleClose} />; // <-- code will not be reached

So just move that inside of the return statement and close them on a single tag because adjacent JSX elements must be wrapped in an enclosing tag. Pass down props to Register, it does not need an internal state since its open prop (according to your design it seems) is to be controlled by HeaderLinks component

export default function HeaderLinks() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);    
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <List className={classes.list}>
        <ListItem className={classes.listItem}>
          <Button
            color="transparent"
            className={classes.navLink}
            onClick={handleClickOpen}
          >
            Register
          </Button>
        </ListItem>
        <ListItem className={classes.listItem}>
          <Button color="transparent" className={classes.navLink}>
            Log In
          </Button>
        </ListItem>
      </List>
      <Register open={open} handleClose={handleClose} />
    </>
  );
}

function Register({ open, handleClose }) {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <div>
      <Dialog
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Register
        </DialogTitle>
        <DialogContent dividers>...content...</DialogContent>
      </Dialog>
    </div>
  );
}