How to make one word to show as Bold in a Ternary Operator?

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0