Error getting list of genres for a specific movie - The MovieDB API - React

Question

I'm trying to get all the genres of a specific movie, but I'm not having success. I was able to list all movies and other information, however, I can't display the list of genres coming from an array. Can someone help me?

This is the part of the API that returns the genres:

{
   "adult":false,
   "backdrop_path":"/3TsnQdMvxdfgLkWqwQYeILBCbbx.jpg",
   "belongs_to_collection":{
      "id":760193,
      "name":"Orphan Collection",
      "poster_path":"/q8icPVro0MYLTXbttS1KMpdQntP.jpg",
      "backdrop_path":"/nsslKmD5WIYhJ0fO5MDeE6ZjIKp.jpg"
   },
   "budget":0,
   "genres":[
      {
         "id":27,
         "name":"Horror"
      },
      {
         "id":53,
         "name":"Thriller"
      }
   ]
}

API call:

getMovieGenres: async (id: string) => {
    const response =
      await require(`/movie/${id}?api_key=${key}&language=pt-BR`);

    return response.data;
  },

Typing:

export type GenresType = {
  id: number;
  name: string;
};

Movie details page:

import { useEffect, useState } from "react";
import { parsePath, useParams } from "react-router-dom";
import { api } from "../../api";
import { MovieDataType, GenresType } from "../../types/MovieDataType";

import style from "./style.module.css";

export const Movie = () => {
  const [movie, setMovie] = useState<MovieDataType>();
  const [genresList, setGenresList] = useState<GenresType[]>([]);
  const params = useParams();

  const loadDataMovie = async (id: string) => {
    const movieData = await api.getMovie(id);
    setMovie(movieData);
  };

  const loadGenres = async (id: string) => {
    const genre = await api.getMovieGenres(id);
    setGenresList(genre);
  };

  useEffect(() => {
    if (params.id) {
      loadDataMovie(params.id);
      loadGenres(params.id);
    }
  }, []);

  const imgPath = "https://image.tmdb.org/t/p/w1280/";
  const imgPoster = "https://image.tmdb.org/t/p/w500/";

  return (
    <>
      <div className={style.headerMovie}>
        <div
          style={{
            backgroundImage: `url('${imgPath}/${movie?.backdrop_path}')`,
          }}
          className={style.bg}
        ></div>

        <div className={style.content}>
          <img src={`${imgPoster}/${movie?.poster_path}`} alt="" />
        </div>

        <p>
          <>
            {genresList.map((item) => {
              <p>{item.name}</p>;
            })}
          </>
        </p>
      </div>
    </>
  );
};

score 2 · Answer 1 · answered Oct 13 '22 at 05:40

genresList is actually an object, not a list.

genresList.genres is the array you want to iterate.

so this

    <p>
      <>
        {genresList.map((item) => {
          <p>{item.name}</p>;
        })}
      </>
    </p>

should become

    <p>
      <>
        {genresList.genres.map((item) => {
          <p>{item.name}</p>;
        })}
      </>
    </p>

Error getting list of genres for a specific movie - The MovieDB API - React

1 Answers1