Quiero activar un evento modal desde el componente de niños. Por lo general, paso el estado en forma de <Children handleOpen={HandleOpen} /> . Si se presiona el botón en el componente secundario, el evento dentro del elemento principal debe activarse y mostrar el texto de los elementos secundarios. ¿Cómo puedo darme cuenta si {children} está en uso?

aplicación.js

 const App = () => { return ( <Router> <div> <Switch> <PrivateRoute exact path="/children1" component={children1} layout={basic} /> <PrivateRoute exact path="/children2" component={children2} layout={basic} /> </Switch> </div> </Router> ); }

Contenedor de diseño/Principal/Básico

 const Basic = ({children}) => { //Modal const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div className="App"> //Insert Children Component {children} //Show this Modal when called from children/with sent data <Modal open={open} onClose={handleClose}> <Box> data xxx from child </Box> </Modal> </div> ); };

niños1 y niños2

 const children1 = ( { handleOpen }) => { return ( <div> <button onClick={handleOpen} data={xxx}>Open Modal with xxx Text</button> </div> ); };