Guys I'm loading some json data about movies on to my page, I would like to click on the title of the movie to get additional information about that specific movie. However when I place a Router tag around the component, nothing is displayed on the page. What could be the issue?
Here's the json data:
{
"movies":[
{
"title": "Spiderhead",
"cover": "images/Spiderhead.jpeg",
"description": "In the near future, convicts are offered the chance to volunteer as medical subjects to shorten their sentence. One such subject for a new drug capable of generating feelings of love begins questioning the reality of his emotions.",
"year": 2022,
"genre": "Action",
"length": "1h 46m",
"viewer_rating": 5.4,
"critic_rating": 2.0,
"critiques": [
{
"critic_name": "Roger Ebert",
"image": "spiderhead_critic",
"feedback": "Though it starts with promise, 'Spiderhead' is pseudo-heady sci-fi stuff that treats its most intriguing elements like an afterthought, and misses the opportunity to be a memorable oddity aside from its disappointments.",
"rating": "**"
}
]
},
{
"title": "THE MAN FROM TORONTO",
"cover": "images/man_from_toronto.jpg",
"description": "The Man From Toronto has a crackerjack premise and a fine pair of stars, but this toothless comedy mismatches its promising elements and winds up neither funny or thrilling.",
"year":2022,
"genre": "Action, Comedy",
"length": "1h 50m",
"viewer_rating": "42%",
"critic_rating": "24%",
"critiques": [
{
"critic_name": "Calum Marsh, New York Times",
"critic_image": "https://www.asso-sherpa.org/wp-content/uploads/2018/03/new-york-times-logo.jpg",
"feedback": "Although Hart, as the broadly comic version of the classic Hitchcockian Wrong Man, has a certain goofball charm, his frantic coward routine gets old quickly, with no appreciable change as the action-flick danger continues to escalate.",
"rating": 3.6
}
]
},
{
"title": "Public Enemies",
"cover": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRdKrxTlMnQa6f4JJkzTQAO3nIkep-8rqUnRtFUxbbvsIaXitgY",
"description": "John Dillinger, Baby Face Nelson and Pretty Boy Floyd are gangsters who have terrorised the city. Federal agents try their best to nab them.",
"year": 2009,
"genre": "Action, Biography, Crime",
"length": "2h 20m",
"viewer_rating": "68%",
"critic_rating": 4.0,
"critiques": [
{
"critic_name": "Written by Richard Propes The Independent Critic",
"critic_image: ": "https://www.adamfazel.com/img/TheIndependentCriticlogo.png",
"feedback": "While 'Public Enemies' never quite soars to the heights of 'Bonnie & Clyde' or 'The Untouchables,' it is easily one of 2009's most satisfying action dramas for adults. Featuring memorable performances from Depp and Cotillard and a strong supporting cast, 'Public Enemies' is an intelligent and compelling story about a man whose true story is as intriguing as the myth that has enveloped his life long after his death.",
"rating": " "
}
]
},{
"title": "Trauma",
"cover": "https://m.media-amazon.com/images/M/MV5BZmIzN2ZkNDEtNjJmNS00ZDNmLWE3YTctN2UwZTdjYzIyZDkzXkEyXkFqcGdeQXVyMTI0NTEyNzU@._V1_.jpg",
"description": "Four friends, partying in a house in the middle of nowhere are brutally attacked by a man and his son, forcing the remaining women to take vengeance upon them.",
"year": 2017,
"genre": "Action, Drama, Horror",
"length": "1h 46m",
"viewer_rating": " ",
"critic_rating": " ",
"critiques":[
{
"critic_name": "411MANIA",
"critic_image": "https://cdn-cache.wrestlingnewssource.com/u/webp_full/c616679e401bcae1eafcaefb1a72fe11_767_409.webp",
"feedback": "Trauma is not a “fun” horror movie. Again, it's hard to sit through and will make you question man's inhumanity to man. It will also make you hate life. If you're not a fan of extreme horror don't even bother with Trauma. You won't get through it."
}
]
},{
"title": "Hustle",
"cover": "https://m.media-amazon.com/images/M/MV5BYjdhYTE3NjMtZjI3OC00NzVlLWFiNTUtNzQ3NDNiNTI3NDg4XkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_FMjpg_UX1000_.jpg",
"description":"A basketball scout discovers a phenomenal street ball player while in Spain and sees the prospect as his opportunity to get back into the NBA.",
"year":2022,
"genre": "Drama, Comedy, Sport",
"length": "1h 57m",
"viewer_rating": "7.4",
"critic_rating": "7",
"critiques": [
{
"critic_name": "3 brothers film",
"critic_image": "3 brothers film",
"feedback": "What’s the difference between the players who make it and those who don’t? The preparation. The obsession. The hustle. This film charts the hard work in between the big moments. It’s a movie about an NBA lifer made for lifelong fans."
}
]
},
{
"title": "Top Gun: Maverick",
"cover": "https://mlpnk72yciwc.i.optimole.com/cqhiHLc.WqA8~2eefa/w:auto/h:auto/q:75/https://bleedingcool.com/wp-content/uploads/2022/05/FSaEkRhVEAEVUQO.jpeg",
"description": "After more than thirty years of service as one of the Navy's top aviators, Pete Mitchell is where he belongs, pushing the envelope as a courageous test pilot and dodging the advancement in rank that would ground him.",
"year": 2022,
"genre": "Action, Drama",
"length": "2h 10m",
"viewer_rating": 8.6,
"critic_rating": "96%",
"critiques": [
{
"critic_name": "Tony Macklin",
"critic_image": "http://tonymacklin.net/images/macklin.jpg",
"feedback": "The expectations for the sequel have been percolating for two years. It was supposed to be released in 2020, but COVID prevented that. he original had only one Black pilot. Top Gun: Maverick has more minority actors, and one of its major pilots is a female, 'Phoenix,' played by Monica Bavaro. Bavaro reportedly is the only one of the major actors along with Cruise who didn't throw up during the intense training for the flights."
}
]
},
{
"title": "Black Mass",
"cover": "https://m.media-amazon.com/images/M/MV5BNzg0ODI3NDQxNF5BMl5BanBnXkFtZTgwMzgzNDA0NjE@._V1_.jpg",
"description": "The true story of Whitey Bulger, the brother of a state senator and the most infamous violent criminal in the history of South Boston, who became an FBI informant to take down a Mafia family invading his turf.",
"year": 2015,
"gener": "Biography, Crime, Drama",
"length": "2h 3m",
"viewer_rating": 6.9,
"critic_rating": ""
}
]
}
Here's the App.js code:
import React from 'react';
import './App.css';
import MovieCard from './MovieCard'
import Movies from './Movies';
import Homepage from './Homepage';
import test from './test';
import data from './data.json'
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className='App'>
<Router>
<Movies />
</Router>
</div>
</Router>
);
}
export default App;
Code that renders the card to the page, Movie.js:
import React from "react";
import { useState } from "react";
import data from './data.json'
import { Link, BrowserRouter } from "react-router-dom";
import './App.css'
const Movies = () =>{
const [search, setSearch] = useState("");
var display = document.getElementsByClassName("app");
return(
<div className="nav-bar">
<nav>
<input type="text" className="searchbar" placeholder="Search.." onChange={e => {setSearch(e.target.value)}}/><br></br><br></br>
</nav>
{data.movies.filter((val)=>{
if(search==""){
return val;
}else if(val.title.toLocaleLowerCase().includes(search.toLocaleLowerCase())){
return val;
}
}).map((val,key)=>{
return (
<div className="movie-card" key={key}>
<p className="title">{val.title}</p> <br></br>
<img src={val.cover}/> <br></br>
{/* <Link to={`fulldetails/${val.title}`}></Link> */}
</div>
)
})}
</div>
)
}
export default Movies;