How do i fetch genres from the Movie Database API

1

I am trying to fetch genres of a particular movie from a Movie DB and display first two of them in UI but i keep getting error genres is not defined.

MovieInfo.js

import React, { useContext, useEffect } from "react";
import MovieContext from "../context/movie/movieContext";

const MovieInfo = ({ match }) => {
  const movieContext = useContext(MovieContext);
  const { movieInfo, getMovieInfo } = movieContext;

  useEffect(() => {
    getMovieInfo(match.params.id);
    //eslint-disable-next-line
  }, []);

  const { poster_path, title, genres } = movieInfo;

  const genresArr = [];

  genres.forEach((genre) => {
    if (genre.name === true) {
      genresArr.push(genre.name);
    }
  });

  const genre2 = genresArr.slice(0, 2);

  return (
    <div className="w-full bg-black">
      <div className="container w-4/5 h-600px overflow-hidden bg-gray-900 mx-auto mt-4">
        <div className="w-1/4 h-auto float-left overflow-hidden">
          <img
            src={"https://image.tmdb.org/t/p/w400/" + poster_path}
            alt=""
            className="w-full block content-center p-4"
          />
        </div>
        <div className="w-3/4 h-auto float-right overflow-hidden  p-2">
          <h3 className="text-2xl text-white font-mono mt-4 mb-3">{title}</h3>
          <h3 className="text-2xl text-white font-mono ">{genre2}</h3>
        </div>
      </div>
    </div>
  );
};

export default MovieInfo;

This is the part i am reffering to

const { poster_path, title, genres } = movieInfo;

  const genresArr = [];

  genres.forEach((genre) => {
    if (genre.name === true) {
      genresArr.push(genre.name);
    }
  });

  const genre2 = genresArr.slice(0, 2);

This is the call that i am using and it should include genres as well

const getMovieInfo = async (id) => {
    const response = await axios.get(
      `https://api.themoviedb.org/3/movie/${id}?api_key=MY_API_KEY&append_to_response=credits`
    );
    dispatch({
      type: GET_MOVIE_INFO,
      payload: response.data,
    });
  };

rsz_GENRES
rsz_GENRES2832×2124 1.86 MB

2

Can we maybe see some live code so we can debug it? Use something like CodeSandbox.

What are you logging out in the screenshot, is it movieInfo? If not, did you try logging it out?

3

I was logging getMovieInfo, data in the console displays all the info that i am getting from that http request. Since genres is an array i needed to put


 `const { poster_path, title, genres=[] } = movieInfo`

That solved it.Thanks for your interest.

4

But that is just giving it a default value.

Is genres not supposed to contain the array as shown in the screenshot?

5

When i typed genres=[ ] i stopped having that error and i could see my user interface again, but i didn t see genres displayed, i thought that it was just a css issue and that i would fix it later, but on a second look i don t think it is.
Here is the link to my GitHub repo if you re interested

1.Type npm start in the terminal to start the app
2.Type the name of a movie in an input field (for example Teminator) and you will see all the movies with that name displayed in the UI.
3.Then click on Movie Details button and you ll enter MovieInfo.js component.
That s where genres should be displayed.

6

genre.name is a string, you are checking for a Boolean value of true.

if (genre.name === true) {
  genresArr.push(genre.name);
}

i.e.

'test' === true
// false

Instead either just check that genre.name is a truthy value if(genre.name) or explicitly check that it is not an empty string before pushing it to the array.

7

Yes, if(genre.name) does the job.

const genresArr = [];

  genres.forEach((genre) => {
    if (genre.name) {
      genresArr.push(genre.name);
    }
  });

  const genre2 = genresArr.slice(0, 2);
  const genreStr = genre2.toString();
  const firstTwo = genreStr.split("");

rsz_genres
rsz_genres2832×2124 976 KB

Thank you so much for your help.