1

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

1 respuesta 1

0

En el primer trozo de código que colocaste, estas dando como valor 'movies.trailer' a la propiedad 'url'.

Aquí está el primer problema, y es que movies, es un array, no un objeto, en este caso 'movies.trailer' no existe. Ese problema lo solucionas con map, como lo estás haciendo en el segundo trozo de código. Esto es correcto.

El detalle, es que map devuelve un resultado con cada elemento que hay en el array, por eso devuelve todas las películas.

Para corregirlo, puedes usar filter() en lugar de map, y dentro, hacer una validación de sí el id del elemento al que estás haciendo click es igual al de la película (movie.id), entonces sí lo retorne.

También, podrías probar con find(), que devuelve solamente un elemento, el primero que coincida con la validación, pero no estoy seguro sí en React funciona.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.