How to insert HTML tag with injectIntl formatMessage using React-Intl?

Question

I have a react-intl package issue. I am using an injectIntl way to use props in the component. Pure String is fine, but it will not work if I wrapped the HTML tag.

Pure String Success Case

const _tableNoText = intl.formatMessage(
    { id: 'footer.table_no' },
    { value: basket.table }
);
//console -> Table 1

Pure String with HTML Tag Fail Case

const _tableNoText = intl.formatMessage(
    { id: 'footer.table_no' },
    { value: <b>basket.table</b> }
);
// console -> Table [object object]

If I change the formatMessage to formatHTMLMessage, it will output the same above result, how should I fix that?

Thanks all very much.

Answer 1

When you're using { value: <b>basket.table</b> } you're in fact creating React component b which is an ordinary JavaScript object. This step is just hidden from you by tsx (or jsx) compiler.

So if you want to render HTML you have to wrap the actual HTML string with quotes, then translate the string and then let React unwrap (or turn) the HTML string into DOM elements.

const translated = intl.formatMessage(
  { id: 'footer.table_no' },
  { value: '<strong>STRONG</strong>' }
);

return (
  <div dangerouslySetInnerHTML={{__html: translated}} />
)

If you want to interpolate basket.table just pass it as another value:

...
{
  value: '<strong>STRONG</strong>',
  table: basket.table,
}