Estoy haciendo una pagina para peliculas, el problema esta en que quiere la al hacer click a una pelicula me muestra la informcion de solo la pelicula que seleccione, pero por alguna razon no logro acceder a dicha informacion
import movies from '../../consts/movie-list';
import ReactPlayer from 'react-player';
export const Summary =()=>{
return(
<>
<Header/>
<div>
<ReactPlayer
url={movies.trailer}
width='40rem'
controls
playing
muted={false}
/>
<img src={movies.billboard}/>
<h1>{movies.title}</h1>
</div>
<Footer/>
</>
);
}
la informacion de las peliculas viene del archivo movie-list, cada elemento tiene su ID
import kimetsu from '../assets/movies/kimetsu-movie.jpg'
import ironman from '../assets/movies/iron-man.jpg'
export default[
{
"id":1,
"title":"Kimetsu no Yaiba: mugen ressha hen",
"overview":"descripciond de pelicula",
"trailer":"https://www.youtube.com/watch?v=-AwLMRgcEoA&ab_channel=Cin%C3%A9polis",
"billboard":kimetsu
},
{
"id":2,
"title":"Iron Man",
"overview":"descripciond de pelicula",
"trailer":"https://www.youtube.com/watch?v=EVFUfCUZbxk&ab_channel=MxTrailersHD",
"billboard":ironman
}
la unica manera en la que muestra informacion es de la siguiente manera
{movies.map(movie=>{
return(
<div>
<ReactPlayer
url={movie.trailer}
width='40rem'
controls
// playing
muted={false}
/>
<img src={movie.billboard}/>
<h1>{movie.title}</h1>
</div>
)
})}
pero de esta forma me muestra la info de todas las peliculas y eso no me sirve, necesito un hero