Tengo varios videos que obtuve de la API. después de obtener la respuesta de la API, la almacenó en useState .
Cuando hago clic en el botón de reproducción de un video en particular, debería aparecer una ventana emergente reproduciendo ese video en React Js.
export default function App(data, handleFormSubmit) { const [Response, setResponse] = useState([]); const [videoName, setVideoName] = useState(""); const [open, setOpen] = React.useState(false); const [formData, setFormData] = useState(initialValue); const handleClose = () => { setOpen(false); setFormData(initialValue); }; const onChange = (e) => { const { value, id } = e.target; setFormData({ ...formData, [id]: value }); }; const { id } = data; const actionButton = (params) => { setVideoName(params.videoName); // I am assuming but need to update videoName here setOpen(true); }; const columnDefs = [ { headerName: "Videos", field: "Video_Name" }, { headerName: "Actions", field: "Video_Name", cellRendererFramework: (params) => ( <div> <Button variant="contained" size="medium" color="primary" onClick={() => actionButton(params)} > Play </Button> </div> ), }, ]; const onGridReady = (params) => { console.log("grid is ready"); fetch("http://localhost:8000/get_all") .then((resp) => resp.json()) .then((resp) => { setResponse(resp.results); params.api.applyTransaction({ add: resp.results }); }); }; return ( <DialogContent> <iframe width="420" height="315" title="videos" src={videoName} /> </DialogContent> ); } Estoy usando este código para llamar a la API y almacenarlo en el estado de usestate después de pasar el nombre del video al botón de reproducción, pero no reproduje el video en el reproductor emergente.
cómo resolver este problema usando reaccionar js