'Use react-intl imperative formatMessage with TypeScript?
I want to use formatMessage
from react-intl (v5.25.1) for creating a string in order to use them later (in an event callback).
For example this for my message ("hp:single:monthlyPerfTooltip": "AZ letzter Bezugszeitraum: <b>{monthlyVal}</b>",
, sorry, German):
const tooltipText = intl.formatMessage({id: 'hp:single:monthlyPerfTooltip'},
{
monthlyVal: intl.formatNumber(input.data.valueMonth, {minimumFractionDigits: 2, maximumFractionDigits: 2}),
b: str => <b>{str}</b>
});
Does not work: Argument of type 'ReactNode' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345)
But I can see this example in the docs (with rich text formatting):
function () {
const messages = defineMessages({
greeting: {
id: 'app.greeting',
defaultMessage: 'Hello, <bold>{name}</bold>!',
description: 'Greeting to welcome the user to the app',
},
})
return intl.formatMessage(messages.greeting, {
name: 'Eric',
bold: str => <b>{str}</b>,
})
}
More versions:
"@types/react-intl": "^3.0.0",
"typescript": "^4.6.3"
What am I doing wrong?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|