Mapping an array of objects that compares each object to an array of ids-CodePudding

I have been working all day for this but I can't still solve it. So I'm using tmdb and I have their array of genre objects which is laid out like this:

  {
    id: 28,
    name: "Action",
  },
  {
    id: 12,
    name: "Adventure",
  }, ....

And I'm looking to compare it to the movie I pass on to a movie component which has an object "genre_ids" that is an array of genre ids and it is laid out like this

genre_ids: [14, 28, 12]

I have this in my return :

                  (genre, index) =>
                    genre.id === showModal?.genre_ids[index] && (
                      <li className="border-2 2xl:border-4 inline rounded-xl px-2">
                        {genre.name}
                      </li>
                    )
                )}

But it doesn't work as I want it to. I'm hoping to render/return the genre names of each movie. If anyone could help me that'd be awesome. I'm using JSX components, react

CodePudding user response：

You can probably try something like this using array.filter()

  const genre_ids = [14 , 20];
  const genre = [{id: 14, name: "action"}, {id: 20, name: "drama"}, {id: 25,name: "sci-fi"}]
  // Will store [{id: 14, name: "action"}, {id: 20, name: "drama"}] in filteredGenre
  const filteredGenre = genre.filter(element => genre_ids.includes(element.id))

You can then map over filteredGenre