Filter array and then map through filtered results

I have an array that I want to use as a filter:

export const WHITE_LISTED_CONTRACTS = [
  "0xcfc7b452a470e5533a1fe51ec6fed0596356c80f", // test
  "0x8a6bf00078d5776940c1707cd681afed0c5b0ff2", // test
];

Now, I have an array of tokens that I want to filter – only the whitelisted token.token_address should render:

{tokens.map((token, index) => {
  WHITE_LISTED_CONTRACTS.filter((whitelist) => {
    if (whitelist === token.token_address) {
      return (
        <Component
          token={token}
        />
      }
    });

Any idea what I’m doing wrong?

>Solution :

you are iterating (filtering) the Whitelist for every token in your array,

Array.includes is the way to go here

{tokens.map((token, index) => {
  if(WHITE_LISTED_CONTRACTS.includes(token.token_address) {
    ...
   }
    }
 }