I have this async function that is fetching data from the API but when I use the data it gets a type error of undefined with movies array. But then I use "&&" to tell it that if it's empty then don't execute the block but it still gives the error. I have done it by the ternary operator too but still the same.
Here is the use effect hook which is fetching data from API
const [movies, setMovies] = useState([])
useEffect(() => {
async function fetchData() {
const request = await axios.get(fetchUrl);
setMovies(request.data.results);
console.log(movies);
return request;
}
fetchData();
}, [fetchUrl]);
And here is the code for that element
{movies &&
<div id="film-row">
<FilmCard img={`${base_url}${movies[0].poster_path}`} />
<FilmCard img={`${base_url}${movies[1].poster_path}`} />
<FilmCard img={`${base_url}${movies[2].poster_path}`} />
<FilmCard img={`${base_url}${movies[3].poster_path}`} />
<FilmCard img={`${base_url}${movies[4].poster_path}`} />
<FilmCard img={`${base_url}${movies[5].poster_path}`} />
</div>
}
add a ? to your tags like this
<FilmCard img={`${base_url}${movies?.[0]?.poster_path}`} />
or change your conditional rendering to :
{movies.length &&
It can be tough to remember what values are coerced to true or false by JavaScript. In this case, an empty array ([]) is actually a "truthy" value (see MDN for examples), so your FilmCard elements will be rendered unwantedly.
Either change your conditional to account for this:
{movies.length &&
Or initialize movies as a "falsy" value:
const [movies, setMovies] = useState(null)
I do fetch data like this:
useEffect(()=>{
(async () => {
const request = await axios.get(fetchUrl);
setMovies(request.data.results);
})()
},[fetchUrl])
And you should check if movies is not null. in the return add
{movies.length > 0 && // What you want to do with movies.}