We've migrated from version ~3 to version 6.2.5.
Currently stuck at migrating the FormattedHTMLMessage
component from this:
<FormattedHTMLMessage tagName="h1" id="hero.header" />
to this:
<FormattedMessage
tagName="h1"
id="hero.header"
values={{
br: () => <br class="hide-on-large" />,
}}
/>
The message under the id
is similar to the following:
"hero.header": "Welcome to <br/>our site"
The problem: This is not producing the wanted result, but instead DOM is being populated with raw (not formatted message):
<h1>Welcome to <br/>our site</h1>
(this <br/>
is acting as part of the string)
We can't seem to understand where the problem lies. On top of that, the migration docs aren't the best. Does anyone know what could be the source of the problem? Also saw https://formatjs.io/docs/react-intl/upgrade-guide-4x#migrating-off-embedded-html-in-messages and was wondering how should this be utilized to restore the FormattedHTMLMessage
?