react Intl - How to return a plain translated string instead of return JSX Element(FormattedMessage).

[yuteen-nikhare-ui]

We can use FormattedMessage to get component with translated text. Instead of getting component with translated text, I need a plain translated string.

I want something like this:

getTranslatedText(id: string): string {

it will return a string instead of JSX (COMPONENT)

}

[longlho]

You can use intl.formatMessage and the way you get a reference to the intl object is via useIntl or injectIntl HOC.

[BrenoVelasco]

That makes sense, but think on a yup object that is in the same file of the component but outside the component (as Yup recommends). How can I access a raw text there with react-intl as the FormattedComponent returns a React.Fragment, the intl hook and the HOC are not accessible and the createIntl doesn't update when the locale changes?
Thanks again!

[longlho]

An intl object is immutable. When you change the locale you have to create a new intl object which is what IntlProvider does for you so you need a reference to that created intl object.
The other way is to inverse that and manually create a new intl obj and pass into RawIntlProvider instead.

[BrenoVelasco]

Got it. For now I'm applying some workarounds for those "unreachable areas" of my code.
Any reason why the declarative FormattedMessage component has to return a Fragment with text? Would it be possible to pass a prop to only retrieve the raw text?

[longlho]

it doesn't always return text, for rich text messages like this is <strong>bold</strong> it returns an array of React nodes and the type definition reflects that.

[sekoyo]

It's just a bit less convenient because we have 1000 <FormatMessage> in const objects outside of components which don't have access to intl from a hook

[monecchi]

Most needed function!!