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

11 Views Asked by At

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 :)

0

There are 0 best solutions below