Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

261
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda