skip to Main Content
import { useParams } from "react-router-dom";
import movies from '../data/data'
import useFetch from "../useFetch";

import './Banner.css'


const MovieDetails = () => {
    const { id } = useParams();

    // destructuring the data
   movies.map((movie)=>{
    return movie.id === id
   })

    return (
        <div className="moviedetails">
           {movie.title}
        </div>
    );
}

export default MovieDetails;

I also try find() to get the data from a specific object but I am always getting this error
_data_data__WEBPACK_IMPORTED_MODULE_0__.default.map is not a function or the same but instead of map it says find

Once I get to the page usind the Id using useParams()

I just need the information from a specific item that matches the id of the page I am at the exact moment

This is the object example


const trending = [
    {
        id:11,
        title: 'Duty & love',
        name: 'Duty & love',
        row: images.dutyRow,
        cover: images.dutyCover,
        sinopsis:'Leon rescued ashley and is trying finding a way to escape the town, but at the same time Leon is seeing in Ashley  more than just a mission.',
        duration:'1h 25m',
        genrer:'Drama, Romance',
        type: 'Movie',
        rating:'PG-13'
    },

    {
        id:14,
        title: 'Her',
        name: 'Her',
        row: images.herRow,
        cover: images.herCover,
        sinopsis:'From the moment he saw ramona he got lost in her gaze. Scott will have to overcome every obstacle that prevents him from being with his beloved.',
        duration:'1h 40m',
        genrer:'Romance, Musical',
        type: 'Movie',
        rating:'PG-13'
    },

    {
        id:43,
        title: 'Pride & Prejudice',
        name: 'Pride & Prejudice',
        row: images.zeldaRow,
        cover: images.zeldaCover,
        sinopsis:'Link must overcome the sins of pride and prejudice in order to recover the Master Sword to be able to defeat Ganondorf. ',
        duration:'1h 43m',
        genrer:'Fantasy, Anime, Romance',
        type: 'Movie',
        rating:'G'
    },

    {
        id:50,
        title: 'Eclipse',
        name: 'Eclipse',
        row: images.eclipseRow,
        cover: images.eclipseCover,
        sinopsis:'The Eclipse, the nightmare in real life. Once you get the mark, there is not scape from the devil or angels..',
        duration:'2h 44m',
        genrer:'Dark Fantasy, Horror, Gore',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:32,
        title: 'T-800',
        name: 'T-800',
        row: images.t800Row,
        cover: images.t800Cover,
        sinopsis:'Created by Skynet with the purpose of protecting John Connor of any threat and keeping him safe so the in future they can still have a chance agains the machines',
        duration:'1h 65m',
        genrer:'Action, Futuristic',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:30,
        title: 'Blade Runner 2049',
        name: 'Blade Runner 2049',
        row: images.RunnerRow,
        cover: images.RunnerRow,
        sinopsis:'After thirty years of the original movie, a blade runner called Rigby who is looking for clues to the whereabouts of a replicant',
        duration:'2h 15m',
        genrer:'Cyberpunk, Romance, Action',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:22,
        title: 'Usurper',
        name: 'Usurper',
        row: images.usurperRow,
        cover: images.usurperCover,
        sinopsis:'From being the best friends, to enemies. Princess Rhaeny will star a war after losing the throne and her son. ',
        duration:'58m',
        genrer:'Novel, Fantasy, Drama',
        type: 'TV Series',
        rating:'NC-17'
    },

    {
        id:44,
        title: 'Vampire Diaries',
        name: 'Vampire Diaries',
        row: images.vampireRow,
        cover: images.vampireCover,
        sinopsis:'A vampire group that dedicates to help other vampires to find love.',
        duration:'58m',
        genrer:'Comedy, Romance',
        type: 'TV Series',
        rating:'PG-13'
    },

    {
        id:58,
        title: "American Werewolf",
        name: "American Werewolf",
        row: images.werewolfRow,
        cover: images.werewolfCover,
        sinopsis:'An American werewolf in new york looking for fresh meat ',
        duration:'1h 33m',
        genrer:'Suspense, Paranormal, Canine',
        type: 'Movie',
        rating:'NC-17'
    },

    {
        id:18,
        title: 'Empty',
        name: 'Empty',
        row: images.moonRow,
        cover: images.moonCover,
        sinopsis:' "I promise I will take you to the Moon, No matter how much it takes." ',
        duration:'24m',
        genrer:'Cyberpunk, Romance, Action',
        type: 'TV Series',
        rating:'NC-17'
    },


    {
        id:53,
        title: 'The Mansion',
        name: 'The Mansion',
        row: images.luigiRow,
        cover: images.luigiCover,
        sinopsis:'Luigi explores a haunted mansion, and searches for Mario and deals with ghosts by capturing them through a vacuum cleaner supplied by Professor E.',
        duration:'1h 42m',
        genrer:'Horror, Paranormal',
        type: 'Movie',
        rating:'PG-13'
    },

    {
        id:25,
        title: 'Space Guardian',
        name: 'Space Guardian',
        row: images.guardiansRow,
        cover: images.guardiansCover,
        sinopsis:'Guardians of the cosmos, the space and the world. leela and her crew will always watch for us.',
        duration:'1h 17m',
        genrer:'Anime, Mechas',
        type: 'Movie',
        rating:'G'
    }

]

2

Answers


  1.     <div className="moviedetails">
             {movie.title}  // ?
        </div>
    

    where does this "movie" come from?

    try this:

    const MovieDetails = () => {
       const { id } = useParams();
       const [movie, setMovie] = useState(null);
    
       function getMovie() {
            const data = movies.filter(movie => movie.id === id)[0];
            setMovie(prev => data);
       }
    
       useEffect(() => {
           getMovie();
       }, []);
    
        return (
            <div className="moviedetails">
               {movie.title}
            </div>
        );
    }
    
    Login or Signup to reply.
  2. You might not be exporting your movies object from data/data. Make sure the path ‘../data/data’ is correct. Then inside that file you should have an export, something like:

    const trending = [...]; // Your objects here
    
    export default trending;
    

    Also, your component code is wrong too, you can follow mongu answer, or something like:

    import { useParams } from "react-router-dom";
    import movies from '../data/data'
    import useFetch from "../useFetch";
    
    import './Banner.css'
    
    
    const MovieDetails = () => {
        const { id } = useParams();
        const movie = movies.find(movie => movie.id === parseInt(id)) // You might not need parseInt here, but just in case.
    
        if (movie !== undefined) {
          return `No movie with this id was found: ${id}`
        }
    
        return (
            <div className="moviedetails">
               {movie.title}
            </div>
        );
    }
    
    export default MovieDetails;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search