Cannot make intersection between two nested arrays

Question

I'm making translations dynamic, but I'm struggling in the part when I have to show the corresponding object from the other array.

I have two arrays, which have the same model, and what I'm trying to do is, when I search for a translation, I want to show also the corresponding translation from the other language.

For the moment, I can only show the one that you are searching for.

For example: If I search for the sentence Are you sure?, besides the Are you sure? sentence, it should show also the corresponding sentence from the other column language.

Here is a snippet with an example: https://codesandbox.io/s/polished-smoke-n6w6i?file=/src/App.js

Any help would be very appreciated. Thank you in advance!

Answer 1

The logic is to filter the selected language items by their id, not by their value. The id is taken from the default language items.

This is how

const searchByresourceId = (targetLng, selectedResources) => {
  // get the default language item id
  const ids = selectedResources.map(({languageResources}) => languageResources.map(({id}) => id)).flat();

  return targetLng
    ?.map((item) => {
      const languageResources = item.languageResources.filter(
        (namespace) =>
          ids.includes(namespace.id)
      );
      return {
        ...item,
        languageResources
      };
    })
    .filter((item) => item.languageResources.length > 0);
}

Ans you should change how you set the state

const searchByresourceId = (targetLng, selectedResources) => {
  const ids = selectedResources.map(({languageResources}) => languageResources.map(({id}) => id)).flat();
  return targetLng
    ?.map((item) => {
      const languageResources = item.languageResources.filter(
        (namespace) =>
          ids.includes(namespace.id)
      );
      return {
        ...item,
        languageResources
      };
    })
    .filter((item) => item.languageResources.length > 0);
}

https://codesandbox.io/s/cranky-ellis-ccdhx?file=/src/App.js

The code is not optimized of course, I just demonstrated the logic