Why my map function is not mapping the values in the react component?

Question

I m working on a website clone and I have stuck on a problem with the map function. I am not getting what I am doing wrong because my map function is not mapping the movies[] to the HTML component (although there are the values in the console when I check them).

Here is my file code:

import axios from './axios';
import React, { useEffect, useState } from 'react'
import './Row.css'

function Row({title, fetchUrl, isLargeRow = false}) {
const [movies, setMovies] = useState([]);
const baseUrl = "https://image.tmdb.org/t/p/original";
useEffect(()=>{
    async function fetchData(){
        const request = await axios.get(fetchUrl);
        setMovies(request.data.results);
        return request;
    }

    fetchData();
}, [fetchUrl])

console.log(movies)
    return (
        <div className="row">
            <h2>{title}</h2>

            {movies.map((movie) => {
                
                <img
                 src={`${baseUrl}${
                    isLargeRow ? movie.poster_path : movie.backdrop_path
                }`} 
                alt={movie.name}/>
                console.log(movie.poster_path)

            }
            ) }


        </div>
    )
}

export default Row

looking forward :)

Because your `map` callback doesn't return anything, so it effectively returns `undefined`, which React ignores. See the [linked question's answers](https://stackoverflow.com/questions/45754957/why-doesnt-my-arrow-function-return-a-value). (Basically: Use a concise-form arrow function instead, or use `return`.) — T.J. Crowder, Mar 30 '21 at 13:06
Side note: Thank you for including all of the necessary code for us to see the problem (without including 1,000 lines we didn't need to see). For the first few questions, most people get that wrong, one way or the other. Nice one! :-) — T.J. Crowder, Mar 30 '21 at 13:10

Why my map function is not mapping the values in the react component?

0 Answers0