How can I make the word Full display as Bold in the ternary operator below? If I change it in the span it will make the word enrolled and spots show as bold as well and I don't want that. What's the way to do it?
<span
style={{
flexGrow: 1,
color: "lightgrey",
fontSize: "12px",
marginLeft: "10px"
}}
>
{e.enrolledNum / e.total_spots >= 1
? 'Full'
: `${e.enrolledNum} enrolled ${""} / ${""} ${
e.total_spots ? e.total_spots : "0"
} spots`}
</span>
Wrap it in a strong tag, or if that's not what you mean semantically, some other inline element with a class that makes it bold.
For instance:
<span
style={{
flexGrow: 1,
color: "lightgrey",
fontSize: "12px",
marginLeft: "10px"
}}
>
{e.enrolledNum / e.total_spots >= 1
? <strong>Full</strong>
: `${e.enrolledNum} enrolled ${""} / ${""} ${
e.total_spots ? e.total_spots : "0"
} spots`}
</span>