Checking and displaying values of array compared to another array in React

Question

One data set is an object of arrays of ids and another is an object of arrays of ids and names. What I'd like to do is check if the ids from the first data exist in the second data set and if they do then display the names.

This is what is being called by the component, which works correctly:

<td>Genre</td>
<td>{this.matchGenres(this.props.movie.genre_ids, this.props.genres)}</td>

And this is the function that I can't get to work:

matchGenres = (genres, genreList) => {

    genres.forEach((genre) => {
      genreList.filter((list) => {
         return list.id === genre;
      }).map((newList) => {
         return newList.name;
      });
    });

  }

It looks like the operation performs correctly and returns the right names when I console.log it! But! its not showing up in the component on render.

IvanD · Accepted Answer · 2020-10-26 04:29:07Z

1

const genres = [{
  id: 1,
  name: "Jazz Music"
}, {
  id: 2,
  name: "Something"
}];

const genreList = [1, 10, 100];

matchGenres = (genres, genreList) => genres
  .filter(genre => genreList.includes(genre.id))
  .map(genre => genre.name);

const matchedGenres = matchGenres(genres, genreList);

console.log(matchedGenres);

answered Oct 26, 2020 at 4:29

IvanD

2,98320 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kiranvj · Accepted Answer · 2020-10-26 07:17:43Z

1

But! its not showing up in the component on render.

Its because your function doesn't return anything. You return inside filter and map and your function does not return anything. Also note that forEach always return undefined

You just need a minor change. Try this

let genres = ["1", "2", "3"];
let genreList = [{
  id: "2",
  name: "Two"
}, {
  id: "32",
  name: "Three"
}]

matchGenres = (genres, genreList) => {

  return genreList.filter((list) => {
    // findIndex return array index if found else return -1 if not found
    return genres.findIndex(genere => genere === list.id) > -1;
  }).map(list => list.name);

}

console.log(matchGenres(genres, genreList));

edited Oct 26, 2020 at 7:17

answered Oct 26, 2020 at 4:46

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Comments

Bhargav Rao · Accepted Answer · 2020-10-26 17:58:26Z

0

This is the solution that ended up working:

if (genreList.length !== 0) {
  return genres.map(genre => genreList.find(list => list.id === genre)).map((newList) => newList.name) + ',';
}

For some reason the value of GenreList, which is an array, was showing up as empty for the first couple times the function is call. Thats another problem I'll have to look at but the if statement solves for it for the time being.

edited Oct 26, 2020 at 17:58

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Oct 26, 2020 at 16:04

Joon Joonam

8814 bronze badges

3 Comments

Scratte Over a year ago

The Answer box isn't really for asking follow up questions. Any Answer on this thread must answer the Question, not a question in an Answer. Please visit the tour and how to answer to see how Answers on Stack Overflow work.

PMerlet Over a year ago

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review

Scratte Over a year ago

@PMerlet There's an actual answer in this post. It should not be deleted due to the last sentence. If anything, it can be edited out.

Collectives™ on Stack Overflow

Checking and displaying values of array compared to another array in React

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related