img src not responding in reactjs-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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 .