How to bold a string within a JS object?

Question

const paymentOptionsRadio = [
{
    key: 'fullamount',
    value: `Full amount - ${getCurrency(bookingData?.currencyIsoCode)} ${
        bookingData?.expectedPayments[0].amount
    }`,
},
];

    <ListRadioButtons
        name='paymentType'
        value={selectedPaymentOptionType}
        values={paymentOptionsRadio}
        onChange={handlePaymentChange}
        defaultValue={selectedPaymentOptionType}
    />

How to bold a string within a JS object? I am using react.

My attempt:

const paymentOptionsRadio = [
        {
            key: 'fullamount',
            value: `Full amount - ${(
                <b>{getCurrency(bookingData?.currencyIsoCode)}</b>
            )} ${(<b>{bookingData?.expectedPayments[0].amount}</b>)}`,
        },
    ];

Why mark this question down? I have provided examples, my attempt, screenshot...

If your attempt, by placing `` tags in the output, didn't work, then it's likely that the content is created in such a way that HTML is stripped from it. I'd suggest you target the content using CSS instead. You probably should also fix the `[object Object]` issue in the output too. — Rory McCrossan, Sep 16 '22 at 10:47
I only need to bold the payment amount though, so would still need a span or something to target with css? — BennKingy, Sep 16 '22 at 10:50
@PriyenMehta Don't do that, questions should be self contained not having required content on external sites. — takendarkk, Sep 16 '22 at 10:55
value: `Full amount - ${getCurrency(bookingData?.currencyIsoCode)} ${bookingData?.expectedPayments[0].amount}`, There is no containing element that splits the full amount text and payment amounts :( — BennKingy, Sep 16 '22 at 10:55
You dont "bold something in a javascript object" - you bold something when you output it to some UI. Show us your UI code, and we can help how to bold that string. — Jamiec, Sep 16 '22 at 10:58
Still not much use, we need to know what `ListRadioButtons` does — Jamiec, Sep 16 '22 at 11:00
I'm just passing the value down into that component into another component, it creates a radio. Don't worry though, I don't think this is possible. — BennKingy, Sep 16 '22 at 11:04

score 1 · Accepted Answer · answered Sep 16 '22 at 13:16

The approach you are trying does not work because react automatically prevents html injection, in order to do that you need to use dangerouslySetInnerHTML in your ListRadioButtons component

// ListRadioButtons
<label
    htmlFor="html"
    dangerouslySetInnerHTML={{ __html: value }}
></label>

or to turn the entire value into a jsx element, example:

const paymentOptionsRadio = [
{
    key: 'fullamount',
    value: <span>Full amount - <b>{getCurrency(bookingData?.currencyIsoCode)}</b> <b>{bookingData?.expectedPayments[0].amount}</b></span>,
},
];

If you are not able to use a jsx element for the value have a look at this similar question and see if the answers are of any use to you Highlight text using ReactJS

score -1 · Answer 2 · answered Sep 16 '22 at 11:24

import "./styles.css";

export default function App() {
  const get = () => {
    return "30";
  };
  const paymentOptionsRadio = `Full amount - <b>${get()}</b> `;

  return (
    <div className="App">
      <input type="radio" id="html" name="fav_language" value="HTML" />
      <label
        htmlFor="html"
        dangerouslySetInnerHTML={{ __html: paymentOptionsRadio }}
      ></label>
    </div>
  );
}

you can try using dangerouslySetInnerHTML attribute inside label tag of radio button to render html content

How to bold a string within a JS object?

2 Answers2