Estoy tratando de mostrar algunos datos en mi componente modal. Sin embargo, cuando paso los datos como accesorio a mi modal, puedo ver que obtengo los datos en mi useState , pero no puedo verlos mientras los uso en el componente Modal.

Por favor, vea el código que probé.

 const handleWatchOpen = (movieData) => { setWatchVideo(true) const videoItem = [...videoData, movieData ] setVideoData(videoItem) } const handleWatchClose =() => { setWatchVideo(false) setVideoData("") } <Button className = {classes.cardButton} size = "small" onClick = { () => handleWatchOpen(movie)}>Watch</Button> <VideoModal watchVideo = {watchVideo} handleWatchClose = {handleWatchClose} setVideoData ={setVideoData}/>

VideoModal.jsx

 const VideoModal = ({ watchVideo, handleWatchClose, setVideoData: { title }, }) => { const classes = useStyles(); console.log(title); return ( <> <Modal open={watchVideo} onClose={handleWatchClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" > <div className="modal"> <img src="" alt="img" /> <h1>h1 {title}</h1> <Button className={classes.cardButton} size="small" onClick={handleWatchClose} > Close </Button> </div> </Modal> </> ); }; export default VideoModal;

Por favor, vea el resultado de la consola. Dice undefined y se activa más de una vez cuando hago clic en el botón de reloj. No se por que. ¿Alguna ayuda o sugerencia sobre esto, por favor?