I have a variable that gets the value from the rest api in json format. The variable is data rate. The conditions are such that if the data rate is greater than 1MB it is said to be active and the border color should be green, if less than 1MB it is said to be inactive. Similarly there are few other conditions as well. How to change the border of the card automatically considering the value. So my question is how to add conditioning for the border color within the card tab.
<Card className="cluster-cards" >
<Card.Header as="h5">Cluster-1 [ID]</Card.Header>
<Card.Body>
<Card.Text>
<Card border="dark" bg="light" style={{ width: '18rem' }} className ="sub-cards">
<Card.Header>CAN 1</Card.Header>
<Card.Body>
<Card.Text>
<h6><Badge pill bg="primary">Source ID-{783}</Badge></h6>
<h6><Badge pill bg="secondary">Data Rate-{'345Kbps'}</Badge></h6>
<h6><Badge pill bg="info">Total amount of data received-{'6MB'}</Badge></h6>
</Card.Text>
</Card.Body>
</Card>
You can try this.
const customStyle = {
borderColor: conditionState ? "#fff" : "red"
}
<Card className="cluster-cards" style={customStyle} >
//OR
<Card className="cluster-cards" className={${conditionState ? "border-none" : "border-red"}} >