React-Intl: access formatMessage in nested component

Question

The question is simple and Im can't believe I cant found a solution (without context) for a situation as simple as this.

Im using react-intl. I have an App.jsx with a child component Index.jsx with a SideBar.jsx with a CreateNewSomething.jsx.

In every components, the command

<FormattedMessage
     id="new_object.fill_title"
     defaultMessage='Please fill the "title" parameter'
/>

works perfectly thanks to <IntlProvider> provided by App.jsx

Unfortunally, I can't inject FormattedMessage as state value of a component.

Example:

<Input 
 s={6} 
 label={label_dash_title} 
 style={style_items_form} 
 onChange={this.onDashTitleChange} 
 onKeyPress={this.newDashHandleEnterKey}
 error= { this.state.title_error }
/>

When the input field is not filled (is required) I want to print an error message. Unfortunally I can't write:

const error_message = <FormattedMessage
            id="new_dash.fill_title"
            defaultMessage='Please fill the "title" parameter'
        />

this.setState({"title_error" : error_message});

because I get [object Object] and there is no property inside of it with my translated message.

Searching everywhere, I found I have to use this.props.intl.formatMessage({id: 'new_dash.fill_title'});

but this.props.intl is undefined.

I've tried, in App.jax, to include:

import {addLocaleData, IntlProvider, injectIntl, intlShape} from 'react-intl';

but it makes no difference.

I've tried to pass intl to every child component as props but intl is undefined in App.jsx too.

I don't know where is my mistake.

score 1 · Accepted Answer · answered Feb 12 '18 at 15:47

The module's Wiki explain the method but not how to use.

The solution is simple. You have to change the Export Syntax of your React Component and than this.props.intl will be magically available in the component:

export default injectIntl(MyComponent); //WORKS!!!

Unfortunally:

export default class injectIntl(MyComponent) extends React.Component //DOESN'T WORK

React-Intl: access formatMessage in nested component

1 Answers1