I'm starting with React and something is blocking me that I don't know how to solve it.
My idea is to show details of a movie. Through your ID I can get them. But when I want to show the categories to which that movie belongs, it won't let me, since at first the response comes as undefined and I can't map them.
Inside 'movie' it stores the object of the movie, which inside has the category 'genres' which is another object, therefore I have to iterate it, but I don't know how to do it.
function MovieView(){
const { movieId } = useParams();
const [movie, setMovie] = useState([]);
useEffect(() => {
getMediaDetails('movie', movieId, setMovie);
}, [movieId])
return(
<>
<HeaderGeneric title={movie.title} />
<section className="movieView-container">
<div className="backdropImage-container">
<img className="backdropImage" src={`${URL_images}${movie.poster_path}`} alt="" />
</div>
<div className="movieDescription-container">
<div className="movieDescription-header">
<h2>description</h2>
<span className="movieScore">{movie.vote_average}</span>
</div>
<p className="movieDescription-paragraph">{movie.overview}</p>
<ol className="movieCategories">
</ol>
</div>
</section>
</>
);
}
This is what genres returns
{id: 27, name: 'Horror'} {id: 53, name: 'Thriller'}
The object of the details is as follows:
{
"adult": false,
"backdrop_path": "/aTovumsNlDjof7YVoU5nW2RHaYn.jpg",
"belongs_to_collection": {
"id": 91361,
"name": "Halloween Collection",
"poster_path": "/cq1lf9sUi10faSvqegx8dLDEeZV.jpg",
"backdrop_path": "/d6uWYZe7h7M3F7h4IBjO1jgIkMh.jpg"
},
"budget": 20000000,
"genres": [
{
"id": 27,
"name": "Horror"
},
{
"id": 53,
"name": "Thriller"
}
],
}
As I indicated in the comments, you can map it like this
But the problem is that you do not have any conditional that indicates whether or not you have information from the
movie
and that is why you will always get an error becausemovie
at the beginning it is alwaysundefined
. If the info of themovie
has not been loaded, then you cannot display information, therefore, you can add a conditional before the return, like this:Thus, only when you have already loaded the info of
movie
, then if you render its data.