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"
}
],
}