Home » Reactjs » How to retrieve a string in ReactIntl 2.0 without using FormattedMessage

How to retrieve a string in ReactIntl 2.0 without using FormattedMessage

Posted by: admin January 29, 2018 Leave a comment


Please correct me if I am wrong, FormattedMessage in ReactIntl returns a string wrapped by span tags. In ReactIntl 1.2, we have the option to use this.getIntlMessage('key') to get only the string part.

Here is my question: Is there an equivalent of that in ReactIntl 2.0? I am aware that the string can be obtained by using the Function-As-Child pattern in FormattedMessage as

<FormattedMessage id="placeholder">
        <MyComponent ref="mycomponent" placeholder={formattedValue}/>

However, it messes up the ‘ref’ in my component and I can’t access to the component using this.refs.mycomponent any more.


You can easily return string using intl object provided by react-intl.

this is how you use intl object inside react class in much more easier way.

note: Render Component (main component) should wrap with IntlProvider

class MySubComponent extends React.Component{

        <input type="text" placeholder = {this.context.intl.formatMessage({id:"your_id", defaultMessage: "your default message"})}

MySubComponent.contextTypes ={

By defining contextTypes it will enable you to use intl object which is a context type prop. See react context for more details.


Ok, there is a work around for that. I can add ReactIntl as the context in the component like this:

contextTypes: {
    intl: React.PropTypes.object.isRequired,

Then when trying to retrieve the string of the message and use it, for example in a placeholder, I can do this.

<MyComponent ref="mycomponent" placeholder={this.context.intl.messages.placeholder}/>


There is a better to solve placeholder problem.

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