Translate gendre_ids from TMDB API in react-native application

Question

I'm wondering how to show a genre to each movie in the list. So I have already other details like title, poster_path or description.

The problem comes when I'm trying to show a genre's becouse they are a numbers and I don't know how to translate them to string like 'Horror'

Here is code for fetch data:

    fetch(
      `https://api.themoviedb.org/3/search/movie?&api_key=${
        this.apiKey
      }&query=${searchTerm}`,
    )
      .then(data => data.json())
      .then(data => {
        const results = data.results;
        const movieRows = [];
        const movieGen = [];
        results.forEach(movie => {
          movie.poster_path =
            'https://image.tmdb.org/t/p/w500' + movie.poster_path;
          const movies = <MovieRow key={movie.id} movie={movie} />;
          movieRows.push(movies);
        });
        this.setState({rows: movieRows});
      });
  }

and also diplay it in custom component like movie card:

  viewMore = () => {
    Alert.alert(
      `PRODUCTION : ${this.props.movie.original_language}`,
      `DESCRIPTION : ${this.props.movie.overview}\n \n GENRE : ${
        this.props.movie.genre_ids
      }`,
    );
  };

  render() {
    return (
      <View
        style={{
          width: '100%',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <CardCustom
          title={this.props.movie.title}
          popularity={this.props.movie.popularity}
          vote_count={this.props.movie.vote_count}
          poster_path={this.props.movie.poster_path}
          onPress={this.viewMore}
        />
      </View>
    );
  }
}

export default MovieRow;

This how this looks like in the application:

and the response from api for genre_ids looks like that

I noticed that I have to use separate API for genre's. Now I want to match them to current movie and I dont know how to do it.

Here is a code

class MovieRow extends Component {
  constructor() {
    super();
    this.apiKey = '1bd87bc8f44f05134b3cff209a473d2e';
    this.state = {};
  }
  viewMore = () => {
    Alert.alert(
      `PRODUCTION : ${this.props.movie.original_language}`,
      `DESCRIPTION : ${this.props.movie.overview}\n \n
       GENRE : ${this.props.movie.genre_ids}`,         // < ------ NUMBER DISPLAYS. HOW TO MATCH GENRE WITH CURRENT MOVIE?
    );
    this.fetchGenre();
  };

  fetchGenre() {
    fetch(
      `https://api.themoviedb.org/3/genre/movie/list?&api_key=${this.apiKey}`,
    )
      .then(data => data.json())
      .then(data => {
        const resultGenres = data.genres;
        const genreRow = [];
        console.log(resultGenres);
        resultGenres.map(genre => {
          console.log('name', genre.name, 'id', genre.id);
          const genres = <Text>genre: {genre.name}</Text>;
          genreRow.push(genres);
        });
        this.setState({gen: genreRow});
      });
  }

  render() {
    return (
      <View
        style={{
          width: '100%',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <CardCustom
          title={this.props.movie.title}
          popularity={this.props.movie.popularity}
          vote_count={this.props.movie.vote_count}
          poster_path={this.props.movie.poster_path}
          onPress={this.viewMore}
        />
          {this.state.gen}
      </View>
    );
  }
}

also this is how response looks like

Regards

Answer 1

Just get an array with all ids of genders and store it into your state, then when you want to display it you will just use a map. like so :

this.state.gender_ids = [
    1: "Action",
    2: "Horror",
    3: "Other gender"
]

this.props.movie.genre_ids.map(id => <Text key={this.state.gender_ids[id]}>{this.state.gender_ids[id]}</Text>)

Just run the following code into your browser's console, I'm pretty sure from now on you'll get the job done.

Example for pairing :

let gendersFromServer = [
    {
        id: 28,
        name: "Action"
    },
    {
        id: 12,
        name: "Adventure"
    },
    {
        id: 16,
        name: "Animation"
    },
    // other genders here
]

let gender_ids = [] // intialize with an empty array
gendersFromServer.map(el => gender_ids[el.id] = el.name) // here you transform the data
// here you can setState({gender_ids})

const movie = {
    gender_ids: [
        28,
        12,
        16
    ]
    // rest of data
}

// how to get text gender, notice that gender_ids from console log is the one you use in state, not the one from the movie
movie.gender_ids.map(id => console.log(gender_ids[id]))

EDIT 2:

Hope this will solve your problem finally

import React from 'react'
import { SafeAreaView, ScrollView, View, Text } from 'react-native'

const API_KEY = '1bd87bc8f44f05134b3cff209a473d2e'

export default props => {

    const [genres, setGenres] = React.useState([])
    const [movies, setMovies] = React.useState([])

    React.useEffect(() => {

        fetch('https://api.themoviedb.org/3/search/movie?&query=Now+You+See+Me&api_key=' + API_KEY)
        .then(res => res.json())
        .then(result => {
            setMovies(result.results)
        })

        fetch('https://api.themoviedb.org/3/genre/movie/list?&api_key=' + API_KEY)
        .then(genre => genre.json())
        .then(result => {
            const genres = result.genres.reduce((genres,gen) => {
                const { id, name } = gen
                genres[id] = name
                return genres
            },[])
            setGenres(genres)
        })

    },[])

    const Movies = () => movies.map(movie => {
        return (
            <View>
                <Text>{movie.title}</Text>
                <View>
                    <Text>Genres :</Text>
                    {
                        movie.genre_ids.map(id => {
                            return <Text>{genres[id]}</Text>
                        })
                    }
                </View>
            </View>
        )
    })

    return (
        <SafeAreaView style={{flex: 1}}>
            <ScrollView style={{flex: 1}}>
                <Text>Movies here</Text>
                <Movies />
            </ScrollView>
        </SafeAreaView>
    )
}