using react-intl, but return value is escaped

Question

I've search an answer to this question and couldn't find a good answer Im tring to have some formatting in my app and I'm using react-intl. The app looks like this:

    <div>
      <FormattedMessage
        id={"some.id"}
        defaultMessage={`{important} this not bold anymore`}
        values={{
          important: `<b>Important:</b>`
        }}
      />
    </div>

My problem is that the return value is being escaped and I see

<b>Important:</b> this not bold anymore

If I understand correctly, this is done by react as it doesn't allow <> symbols in a string, and is escaping them.

As I saw in many places, I can use dangerouslySetInnerHTML but this is not the right approach to this...

Will appreciate any helpfull advice!

EDIT: Just to be clear - dangerouslySetInnerHTML can be used if instead of using the FormattedMessage component, I'll use formattedmessage function.

Answer 1

Ok.. I missed that I had `` around the value... My bad.. Thanks anyway!