Run function on React.Intl <FormattedMessage>

Question

I am trying to run a function to do further string manipulation on the result of the FormattedMessage. I cannot find a way even after running it through a function as below :

<Button text={ this.testMethod(buttonText) } />

testMethod(result){
 return result;
}

In summary: I am trying to get the actual text and not the object and then do some string manipulation.

Don't want this: {id: "test", defaultMessage: "Hello there"}

Need: To access "Hello there" and for example extract the word "there"

Answer 1

Yes you can. Add a component as a child of FormattedMessage to do further transformation. Here is a minimal snippet to get you started with

<FormattedMessage id="hello">
  {(text) => {
    console.log(text);
    return <>{text.toUpperCase()}</>;
  }}
</FormattedMessage>

Live Example