Estaba tratando de hacer una función que admita accesorios y luego represente un componente al hacer clic en el botón, pero por alguna razón, el código no representará ningún componente al hacer clic ni hay errores en el registro de la consola aquí está el código
const App = () => { const RenderVideoPlayer = (props) => { let videoSrc = { type: 'video', sources: [ { src: `${props.video_url}`, type: 'video/mp4', size: 1080 } ], poster: '/path/to/poster.jpg', } return ( <Plyr options={options} source={videoSrc} /> ) } return ( <Button className="s-btn-1" variant="primary" onClick={() => RenderVideoPlayer(movie.video_info[0])}>Watch</Button> )Puedo confirmar que está recibiendo los apoyos onclick
Porque no es así como funciona React. Devolver un componente al evento onClick no generará ese componente. En su lugar, coloque el componente en su JSX devuelto, pero renderícelo condicionalmente según el estado. Luego, en el controlador de clics, simplemente actualice ese estado. Por ejemplo:
const [showPlayer, setShowPlayer] = useState(false); return ( <> <Button onClick={() => setShowPlayer(true)}>Watch</Button> { showPlayer ? <Plyr ... /> : null } </> ); Obviamente, esto es muy simplista, pero demuestra el concepto. Puede convertir el botón en una opción de mostrar/ocultar usando !showPlayer en lugar de true , por ejemplo. O puede mostrar/ocultar varios jugadores haciendo un seguimiento de cuáles se muestran/ocultan en el estado y luego representando una matriz de ellos en función de ese estado. Y así.
Pero el punto principal es que no puede simplemente devolver JSX desde un controlador de eventos y esperar que React haga algo con eso. Confíe en el estado para rastrear toda la información que necesita para generar el resultado. El JSX usa el estado en el renderizado y el estado de actualización de eventos.