CODEWITHSUNDEEP
javascriptreactjsif-statement
NPam
NPam

Reputation: 35

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

The product has {name,price,quantity}.As per the quantity, change the product row to blue if quantity <10,to red if quantity=0 and normal if quantity >0.



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

export default ProductRow;

Upvotes: 0

Views: 5211

Answers (2)

Siddhant Varma
Siddhant Varma

Reputation: 594

The reason why you're changing the color of only a particular column is that you are creating a colored span based on your props and rendering it inside your table, which is only a column. The best approach would be to create classes in CSS and then conditionally assign those classes to an entire row.

.small{
  color:red;
}
.large{
  color:blue;
}

Feel free to change the CSS or the classnames as desired. Now inside your component-

 const product = props.product;
 const quantity=product.quanity;
 const quantityClass=product.quanity==0? 'small' ? product.quanity<=10 ? 'large' : '';

Assign the quantityClass classname to your row 

 <tr className={quantityClass}>
            <td>{product.name}</td>
            <td>{product.price}</td>
            <td>{product.quantity}</td>
        </tr>

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371193

I'd make a function that, given quantity, calculates the color, then style the <tr> with the result:

const getColor = (quantity) => {
    if (quantity === 0) return 'red';
    if (quantity < 10) return 'blue';
    return '';
};
function ProductRow({ product }) {
    return (
        <tr style={{ color: getColor(product.quantity) }}>
            <td>{product.name}</td>
            <td>{product.price}</td>
            <td>{product.quantity}</td>
        </tr>
    );
}

Upvotes: 6

Related Questions