This is what I see on my localhost
Here's my code
import React, { useState, useEffect } from 'react'
import axios from './axios'
import './Row.css'
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);
setMovies(request.data.results);
return request;
}
fetchData();
}, [fetchUrl])
// console.log(movies)
return (
<div>
<div className="row">
<h2>{title}</h2>
<div className="row__posters">
{movies.map(movie =>
(<img src={`${base_url}${movie.poster_path}`} alt={movie.name} />)
)}
</div>
</div>
</div>
)
}
export default Row
I can't seem to find the problem witht the function because the results in the data that i request from the api are certainly not undefined.
Edit.
For reference I've also added my console here so you can see it returning the request in the log but the error persists.
I can see it working for a second when I reload the page and boom, it's gone and the error is up
You have undefined in your console twice after displaying the request content.
Also you should place a console.log just after (or before) the line
const request = await axios.get(fetchUrl);
useEffect() is called after the first render() is executed, so you surely start with a null value. And the line movies.map(...) fails.
Add a line before your return() with this code:
console.log("movies: ", movies)
if( !movies )
return (<span>loading...</span>)
//... return dom content
You will maybe see (if your server response is slow enough) the 'loading...' screen message flushing before you get to your data screen.
Try using the optional chaining operator (?.) and see what happens.
I wanted to write this as a comment, but I don't have enough reputation.
This kind of error occur when you go for accessing a property of an object which is also undefined. Like this example let val = undefined; val.map(v => console.log()) this will return same error you get in. here I go for map a variable which value is undefined. Similarly somehow your movies got assigned undefined and then go for map returns that error. So it seems you are not properly assigning response object to movies you are assigning undefined value to movies so please check results before assigning it to movies.
const request = await axios.get(fetchUrl);
if(request.data && request.data.results){
setMovies(request.data.results);
}
make sure request.data.results is a list of object not undefined and check your movies has no falsy values before apply map operation to it to avoid error
{movies? movies.map(): `<p>Loading</p>}
You can check request.data by consoling console.log(request.data) if it returns list of object then try setMovies(request.data).
Follow this blog
Uncaught TypeError: Cannot read property of undefined In JavaScript
React - Cannot read property 'map' of undefined