product_card.tsx

import { useState, useEffect } from 'react';

const fetchVariantMetaData: any = async (item: any) => {
  return fetch(`${origin}${item.get('product_url')}`)
    .then(function(response) {
      return response.text()
    })
    .then(function(html) {
      let parser = new DOMParser()
      let doc = parser.parseFromString(html, "text/html")

      let variantMetaData = Array.from(doc.querySelectorAll('.variant-meta-data')).map(function(element) {
        return element.dataset
      })

      return variantMetaData;
    })
}


const getValidVariants = (item) => {
  const [variants, setVariants] = useState(null);
  useEffect(async () => {
    let variantPageMetaData = await fetchVariantMetaData(item);
    let validVariants = item.get('variants').reduce((accumulator: any, variant: any) => {
      let variantPageData = variantPageMetaData.find((variantMetaData) => {
        let variantMetaDataId = Number(variantMetaData.variantId)
        let variantId = Number(variant.get('id'))

        return variantMetaDataId === variantId;
      })

      if (variantPageData.variantAvailable === "true") {
        accumulator.push(variant);
      }

      return accumulator;
    }, []);


    setVariants(validVariants);
  }, []);
  return variants;
}

const ProductCardView: React.SFC<IProductCardProps> = async ({
  item,
  config,
  theme,
  currentImage,
  changeImage
}: any) => {
  const validVariants = getValidVariants(item);
  /** your code */
  ...