Использование переменной JS в разметке

Подскажите могу ли я использовать JS переменную прямо в разметке в className? Сейчас у меня когда бронирование зарегистрированно то дата и время выезда у меня становятся жирными. Как сделать чтобы только время было выделенно жирным? Реакт пока плохо знаю и не могу понять как сделать чтобы не вся дата была жирным шрифтом а только сheck out time. Заранее спасибо за ответ.

  <td id={"today_check_in"+booking.id+"_end_at"} className="today-check-in-td text">
                                            <p className={booking.registered_at !== null ? "card-text text-bold text" : "card-text text"}>
                                                {booking.check_out_time ?
                                                    this.genCheckInTime(booking.check_out_time, booking.end_at, "check_out", t)
                                                    :
                                                    getBookingsDate(booking.end_at, "check_out", 1, t)
                                                }
                                            </p>