String without FormattedMessage

[carlosconnected]

I want to populate a placeholder in a form with a string based on the locale. How can I retrieve the string without using FormattedMessage?

[edelagnier]

If I understand your question correctly, you can use the formatMessage function of the API : https://github.com/yahoo/react-intl/wiki/API#formatmessage

[andregoncalvesdev]

Just add:

Component.contextTypes = {
  intl: React.PropTypes.object.isRequired,
};

Then you will have access to this.context.intl object on your component.

Then, simply use:
<h1>{this.context.intl.formatMessage(messages.example)}

[ericf]

Using context directly works today, but not recommend because it could change in the future. The officially supported way is to wrap your component with the injectIntl() HoC: https://github.com/yahoo/react-intl/wiki/API#injection-api

[alexander-elgin]

Here is another (a shorter) solution

<FormattedMessage {...messages.placeholderMessage}>
  {
     (placeholder) =>  <input type="text" placeholder = {placeholder} />
  }
</FormattedMessage>

[krzywiecki]

@ericf you know, I'm using the way you've mentioned at the moment but it kinda sucks that we have to use HoC, then props and so on don't you think? I'm wondering if this would be possible just to import a function from which component is not dependent and use it. Probably testing would be also easier then. What do you think guys?

[arvinsim]

@krzywiecki I agree with you. It's a very roundabout way of doing things and I think this should be accomplished using simpler methods.

[sundhargopal2015]

Thanks @alexander-elgin

[ucozlab]

@krzywiecki +1. @ericf any comments on that?

[Lillebo]

import { useIntl, FormattedMessage } from 'react-intl';

const MyComponent = () => {
    const { formatMessage } = useIntl();
    return (
        <div>
            <span title={formatMessage({id: 'my.message.key'})} />
            <FormattedMessage id="my.message.key" />
        </div>
    );
}