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
where does this "movie" come from?
try this:
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:
Also, your component code is wrong too, you can follow mongu answer, or something like: