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.

What is your `console.log` statement? – Jack Bashford Mar 20 '19 at 03:59 — Jack Bashford, Mar 20 '19 at 03:59
@JackBashford just console.log(_tableNoText) – tommychoo Mar 20 '19 at 04:00 — tommychoo, Mar 20 '19 at 04:00

score 7 · Accepted Answer · answered Mar 28 '19 at 14:27

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,
}

Thx, I am using this way, haha – tommychoo Apr 10 '19 at 03:31 — tommychoo, Apr 10 '19 at 03:31

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

1 Answers1