如何在 React 中将数据从子组件发送到父组件

Question

And I have a parent component code

const Drawer = props => {
  const theme = useTheme();
  const { history } = props;
  const [open, setOpen] = React.useState(false);
  const [dialogOpen,setDialogueOpen] = React.useState(false)

  const handleDialogueOpen = () => {
    setDialogueOpen(true)
  }

  return (
    <Box sx={{ display: 'flex' }}>
      
      <AppBar position="fixed" open={open}>

        <Toolbar>
          <Typography variant="h6" noWrap component="div">
            XYZ
          </Typography>
          <Button onClick={handleDialogueOpen}>Filter</Button>
        </Toolbar>
      </AppBar>
      


      <DialogBox dilaogOpenProp={dialogOpen}/>

    </Box>
  );
}

export default withRouter(Drawer);

I have a child component

const DialogBox = (props) => {

  const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp);

  React.useEffect(() => {
    setOpen(props.dilaogOpenProp);
  }, [props.dilaogOpenProp]);

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

  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidth
        onClose={() => {}}
        open={dialogOpenState}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(5px)",
        }}
      >
        <DialogTitle>Example Dialog</DialogTitle>
        <DialogContent>Example Content Here</DialogContent>
        <DialogActions>
          <Button onClick={handleDialogClose}>Close</Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

export default DialogBox;

As you can see DialogBox is child to Drawer both are saved in different file DialogBox.js & Drawer.js

I am able to send boolean value via prop named dilaogOpenProp in DialogBox and able to change dialogOpenState value but I have also created a method in child component handleDialogClose() which is changing the value of boolean value of dialogOpenState in local state ,Since its value is also used by parent component in variable name dialogOpen to track state but its not getting updated and its creating UI error

How do I update dialogOpen in parent and dilaogOpenState in child at same time during invocation of its child method handleDialogClose()

Answer 1

Drawer.js

const handleDialogClose = () => {
    setDialogueOpen(false)
  }
     ....
      <DialogBox dilaogOpenProp={dialogOpen} handleDialogCloseProp={handleDialogClose} />

DialogBox.js

      <Dialog
        fullWidth
        onClose={() => {}}
        open={props.dilaogOpenProp}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(5px)",
        }}
      >
        <DialogTitle>Example Dialog</DialogTitle>
        <DialogContent>Example Content Here</DialogContent>
        <DialogActions>
          <Button onClick={props.handleDialogCloseProp}>Close</Button>
        </DialogActions>
      </Dialog>

There is no need of useState. You can do it by props.