React - Only show item if variable is true-CodePudding

I want to only show each instance of the FeedTag if let soldOut is false. How do I add this condition to each instance of the FeedTag? Each product in the productList has a qty and soldout prop and I only want to show a <FeedTag> where qty !== soldout.

  <div>
    {productList.length > 0 &&
      productList.map((product, i) => {
        let soldOut = (productList.qty = productList.soldout);
        return (
          <FeedTag
            data={product}
            name={product.headline}
            onSelect={(e) => onSelectProduct(e)}
            checked={seletedProductList.includes(product._id)}
            icon={<img src={helper.CampaignProductImagePath   product.image} alt="" />}
          />
        );
      })}
  </div>

CodePudding user response：

Fix your assignment of soldOut (using ===; I also renamed the variable to available) and use conditional rendering:

...
  const available = productList.qty !== productList.soldout;
  return (
    available && <FeedTag ... />
  );
);

CodePudding user response：

Filter out the products that are not sold out first, then map:

<div>
  {productList
    .filter((product) => product.qty !== product.soldout)
    .map((product) => (
      <FeedTag
        key={product._id}
        data={product}
        name={product.headline}
        onSelect={(e) => onSelectProduct(e)}
        checked={seletedProductList.includes(product._id)}
        icon={
          <img src={helper.CampaignProductImagePath   product.image} alt='' />
        }
      />
    ))}
</div>

Also don't forget the key attribute inside the map.