I am working with an api with movie react, I want to get the details of each movie but I don't get any results.
import React, { useEffect, useState ,useParams} from "react";
import { Routes,Route,Link } from 'react-router-dom'
//"
const Peliculas = () => {
const [popular, setPopular] = useState([]);
const fetchPopular = async () => {
const url =
"
get popular movies"
const data = await fetch(url);
const movies = await data.json();
setPopular(movies.results);
//console.log(movies.results)
};
useEffect(() => {
fetchPopular();
}, []);
return (
<>
<h2>pelis</h2>
<ul>
{popular.map(img =>
<li key={img.id}><h3>{img.title}</h3><br/><Link to={"/detalles/"+img.id}>
<img src={ "https://image.tmdb.org/t/p/w500"+ img.poster_path} alt={img.title}/>/</Link></li>)}
</ul>
</>
)
}
const Detalle = () => {
const [informacion , setInformacion] = useState();
let {id} = useParams()
const fetchInformacion = () =>{
fetch('
get popular movies'+id)
.then(response => response.json())
.then(info => setInformacion(info))
.catch(err => console.log(err.message))
console.log(informacion.results)
}
useEffect(() => {
fetchInformacion()
})
return (
<>
{
informacion&&
<section>
<h1>{informacion.title}</h1>
<img src={ informacion.poster_path} alt={informacion.title}/>
<p>Estreno :{informacion.release_date}</p>
<p>Ranking {informacion.popularity}</p>
<p><Link to="/">Regresar a la home</Link></p>
</section>
}
</>
)
}
const App = () => (
<>
<Routes>
<Route exact path="/" element={<Peliculas/>}/>
<Route exact path="/detalles/id" element={<Detalle/>}/>
</Routes>
</>
);
export default App;
¿No encuentras una película o serie? Inicia sesión para crearla:
¿Quieres puntuar o añadir este elemento a una lista?
¿No eres miembro?
Contestado por ticao2 🇧🇷 pt-BR
el 21 de marzo de 2023 a las 20:34
I don't understand anything about programming code.
But I think we can get more attention from someone who understands
if we add the name of the tool in the title of this conversation.
Contestado por Sarhang12
el 22 de marzo de 2023 a las 06:55
I believe you are doing something wrong. I recommend fetching your data with axios. try the way below:
Also try to log it to check if you get the data correct. This should work properly. if you could console.log the data, then there should be no problem, the issue would be with the method you are using to show them. Best.