0
141
Vistasimg src not responding in reactjs
this is my row.js code:
import React, { useEffect, useState } from 'react';
import axios from './axios';
const base_URL="https://image.tmdb.org/t/p/original";
function Row({title,fetchUrl}) {
const [movies,setMovies]=useState([]);
useEffect(()=>{
async function fetchData(){
const request=await axios.get(fetchUrl);
console.log(request);
setMovies(request.data.results);
return request;
}
fetchData();
},[fetchUrl]);
return (
<div className="row">
<h2>{title}</h2>
<div className="row__posters">
{movies.map(movie=>{
console.log(movie);
<img src={'${base_URL}${movie.poster_path}'} alt={movie.name}/>
})}
</div>
</div>
)
}
export default Row
My screen should display the posters of films but its not displaying it, I wonder there is some problem in movies.map...... part and img src="......" part
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You need to return image:
<div className="row__posters">
{movies.map(movie=>{
console.log(movie);
return <img src={'${base_URL}${movie.poster_path}'} alt={movie.name}/>
})}
</div>
·
Juan Pablo Isaza
Denunciar
0
you only map the movies object instead returning .Hence try this:
{movies.map((movie,index)=>{
console.log(movie);
return ( <img key={index} src={'${base_URL}${movie.poster_path}'} alt={movie.name}/>)
})}
here , also use key = {index} within img tag.It gives the unique key to each img tag iteratively .
·
Juan Pablo Isaza
Denunciar
Responde la pregunta