I am fetching an API which returns an array of objects then trying to pass that array of object into a useState. When logging out the variable holding my API request, everything works fine. However when setting my useState to the variable holding my API request (an array of objects) and console.logging my useState, I am getting [Object Object].
However, when I create a local array and try to pass it into the useState object, I have no problem outputting it when console.logging my useState.
So my question is, how would I pass a fetched array to my useState so that I am able to console.log it out.
Thanks
import React from "react";
import { useState, useEffect } from "react";
export default function Genrenavbar() {
const [mygenres, setMygenres] = useState([]);
useEffect(() => {
async function APIrequests() {
const response = await fetch(
`https://api.themoviedb.org/3/genre/movie/list?api_key=<<MYAPIKEY>>&language=en-US`
);
const movie = await response.json();
console.log(movie);
setMygenres([movie]);
console.log("state log " + mygenres);
}
APIrequests();
}, []);
return (
<div>
<h1>Hello</h1>
Below is what I am getting when I log out movie (the variable holding the API request) - this is correct
{genres: Array(19)} genres: Array(19) 0: {id: 28, name: 'Action'} 1: {id: 12, name: 'Adventure'} 2: {id: 16, name: 'Animation'} 3: {id: 35, name: 'Comedy'} 4: {id: 80, name: 'Crime'} 5: {id: 99, name: 'Documentary'} 6: {id: 18, name: 'Drama'} 7: {id: 10751, name: 'Family'} 8: {id: 14, name: 'Fantasy'} 9: {id: 36, name: 'History'} 10: {id: 27, name: 'Horror'} 11: {id: 10402, name: 'Music'} 12: {id: 9648, name: 'Mystery'} 13: {id: 10749, name: 'Romance'} 14: {id: 878, name: 'Science Fiction'} 15: {id: 10770, name: 'TV Movie'} 16: {id: 53, name: 'Thriller'} 17: {id: 10752, name: 'War'} 18: {id: 37, name: 'Western'} length: 19
This is what I get when I log out mygenres (The useState that I am trying to put the variable movie in)
state log [object Object]
