jeudi 24 septembre 2020

Usage of Conditional statements in React to change the color of table row based on condition

The product table has {name,price,quantity}.As per the quantity I need to change the product row to blue if quantity <10,to red if quantity=0 and normal if quantity >0. This is the code I have tried so far and am able to change only the particular column and not row.

import React from 'react';

function ProductRow(props){
  
    const product = props.product;
    const name = product.stocked && product.quantity===0 ?
    product.name :
    <span style=>
      {product.name}
    </span>;
  const quantity = product.quantity>10 ?
  product.quantity :
  <span style=>
    {product.quantity}
</span>; 
       
    return (
      <tr>
        <td>{name}</td>
        <td>{product.price}</td>
        <td>{quantity}</td> 
      </tr>
    );
  
}

export default ProductRow;

Aucun commentaire:

Enregistrer un commentaire