Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

262
Views
How do I send data from child component to parent component in React

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()

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!