Question 72508 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to get data from a specific object using id property in React? – Reactjs

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'
    }

]
Tags:

2

Answers


  1. 0 
        <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. 0

    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