How to conditionally change colour of button based on a keyword - css

Question

I am wishing to display card's which hold a Bootstrap badge at the top of each card. I would like to conditionally change the colour of the badge depending on status of the pet.
render() {
const isAdmin = true;
const post = this.props.post;
const id = this.props.post.post_ID;
console.log(post);
return (
<div>
<Card id="card-main" style={{ width: '18rem', margin: '12px' }}>
<span class="badge badge-secondary">{post.petStatus}</span>
<Card.Img id="card-img-top" variant="top" src={post.img_path} />
<Card.Body>
<Card.Title>{post.pet_name}</Card.Title>
<Card.Text id="PetName">
<strong>{post.petName} </strong>
</Card.Text>
<Card.Text id="content">
{post.content}
</Card.Text>
<Card.Text>
<strong>Posted By: </strong>{post.name}
</Card.Text>
<Card.Text
<strong>Posted: </strong>{post.postedOn}
</Card.Text>
</Card>

Answer 1

Depending on the number of colors your need, you could either do it inline:
<Card id="card-main" style={{ width: '18rem', margin: '12px' }}>
<span class="badge badge-secondary" style={{color: post.petStatus === "adopted" ? "blue" : "red"}}>{post.petStatus}</span>
... or if you need several colors probably better to write a helper that returns a style based on the status:
getStyleForStatus = (status)=>{
let statusColor
switch (status){
case "adopted":
statusColor = "blue"
break;
case "lost":
statusColor = "red"
break;
default:
//
return {color:statusColor}
}
}
render() {
const isAdmin = true;
const post = this.props.post;
const id = this.props.post.post_ID;
console.log(post);
return (
<div>
<Card id="card-main" style={{ width: '18rem', margin: '12px' }}>
<span class="badge badge-secondary" style={getStyleForStatus(post.petStatus)}>{post.petStatus}</span>
{/* ... */}
</Card>