Tengo una variable que obtiene el valor del resto de la API en formato json. La variable es la tasa de datos. Las condiciones son tales que si la velocidad de datos es superior a 1 MB, se dice que está activo y el color del borde debe ser verde, si es inferior a 1 MB, se dice que está inactivo. Del mismo modo, también hay algunas otras condiciones. Cómo cambiar el borde de la tarjeta automáticamente considerando el valor. Entonces, mi pregunta es cómo agregar acondicionamiento para el color del borde dentro de la pestaña de la tarjeta.
<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>Puedes probar esto.
const customStyle = { borderColor: conditionState ? "#fff" : "red" } <Card className="cluster-cards" style={customStyle} > //OR <Card className="cluster-cards" className={${conditionState ? "border-none" : "border-red"}} >