Compare a value to something inside a map-CodePudding

I have a shopping cart returning products via a map and printing the item name and price. What i would like to do is during the map be able to go

if price last two digits == 79 apply discount to those items else apply another discount then print the total. Is this possible to do inside a map statement?

Currently my map is this

          {User?.Cart && User?.Cart.length > 0 && (
            <>
              <table className="w-full table-auto">
                <thead>
                  <tr className="text-left border-b-2 border-baileysBlue">
                    <th className="py-5">Product</th>
                    <th className="py-5">Price</th>
                    <th className="py-5">Quantity</th>
                    <th className="py-5">Controls</th>
                  </tr>
                </thead>
                <tbody>
                  {User.Cart.map((prod, i) => {
                    return (
                      <tr
                        key={`key-cart-prod-${i}`}
                        className="border-b border-opacity-50 border-baileysBlue"
                      >
                        <td className="py-5">
                          <Link href={`/product/${prod.Slug}`}>
                            <a>
                              {`${prod.Description} (${prod.ProductID})`}
                            </a>
                          </Link>
                        </td>
                        <td className="py-5">{`${prod.CurrentPrice}`}</td>
                        <td className="py-5">{`Qty: ${prod.Quantity}`}</td>
                        <td className="py-5" style={{width: '1%', whiteSpace: 'nowrap'}}>
                          <RemoveFromCart ProductID={prod.ProductID} />
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>

CodePudding user response：

Yes, you can create a function to do it

function discount(price){
if(price===...){
do something
}else{
do something
}

. . . In your currently map try it

</td>
<td className="py-5">{discount(prod.CurrentPrice)}</td>
<td className="py-5">{`Qty: ${prod.Quantity}`}</td>
<td className="py-5" style={{width: '1%', whiteSpace: 'nowrap'}}>
<RemoveFromCart ProductID={prod.ProductID} />
                        </td>

CodePudding user response：

Yes of course its' possible. You can either do this before the return statement or inside the <td> with the {prod.CurrentPrice} with a ternary operator. I don't know the actual type but if CurrentPrice is a string it could be something along the lines:

{prod.CurrentPrice.endsWith('79') ? parseFloat(prod.CurrentPrice) * 0.5 : parseFloat(prod.CurrentPrice) * 0.8}

or before the return statement

  User.cart.map((prod, i) => {
     let finalPrice = prod.CurrentPrice.endsWith('79') ? parseFloat(prod.CurrentPrice) * 0.5 : parseFloat(prod.CurrentPrice) * 0.8

   return (
     <tr
       key={`key-cart-prod-${i}`}
       className="border-b border-opacity-50 border-baileysBlue"
     >
       <td className="py-5">
          <Link href={`/product/${prod.Slug}`}>
            <a>
              {`${prod.Description} (${prod.ProductID})`}
            </a>
          </Link>
        </td>
        <td className="py-5">{finalPrice}</td>
        <td className="py-5">{`Qty: ${prod.Quantity}`}</td>
        <td className="py-5" style={{width: '1%', whiteSpace: 'nowrap'}}>
           <RemoveFromCart ProductID={prod.ProductID} />
        </td>
     </tr>
   )