Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

260
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda