React Intl- Cannot read property 'formatMessage' of undefined

Question

  ....
 const func1 = (intl) => {
  const text = intl.formatMessage({id: 'mesage'});
  const func2 = () => {
     return {
      <div>.....
      placeholder={text}</div>
   };
  };
    return {
   <div>.....
   {func2()}</div>
  };
 };

export default withStyles(styles)(injectIntl(component));`}

I'm trying to to injectIntl to translate strings using react-intl library, but I keep getting following error:

"Cannot read property 'formatMessage' of undefined"

I am trying to do something like this: React-Intl How to use FormattedMessage in input placeholder

score 1 · Answer 1 · answered Aug 03 '20 at 15:21

You Can Use This Way..!

The Simplest Solution For PlaceHolder Antd.

    import {injectIntl} from "react-intl";

    class DemoForm extends React.Component {
        render() {
            const {getFieldDecorator} = this.props.form;
            const {intl} = this.props;
            const placeholder = intl.formatMessage({id:'enterHere'});
            return (
                <Form.Item label={<FormattedMessage id='name'/>}>
                    {getFieldDecorator('name',)(<Input placeholder={placeholder}/>)}
                </Form.Item>
            )
       }
}
export const Demo = injectIntl(Form.create()(DemoForm));

score 0 · Answer 2 · answered Feb 11 '19 at 09:15

0

You can use props.intl.formatMessage({id: 'mesage'});, intl object is included in props.

Further assuming Mycomponent is wrapped then :

const MyComponent = ({intl}) => { // we are extracting intl from prop object
// component code here
}

answered Feb 11 '19 at 09:15

Umair Farooq

1,763
13
16

Please accept or upvote if your question is answered thanks – Umair Farooq Feb 11 '19 at 09:19
it works but gives a warning error: "Must use destructing props assignment" – user9081274 Feb 11 '19 at 09:27
Then you can use `const {intl} = props;`, depends if your component is class component then `const {intl} = this.props; and then use `intl.formatMessage({id: 'mesage'});` – Umair Farooq Feb 11 '19 at 09:30
okay that worked I think. I cant upvote you, since I'm low feedback. Thank you so much though – user9081274 Feb 11 '19 at 09:35
I have another function "MyComponent.defaultprops that requires me to do the same, but its located outside the MyComponent. How can I translate string in this case? – user9081274 Feb 11 '19 at 09:47
You can also wrap that component in `injectIntl` – Umair Farooq Feb 11 '19 at 09:56

score 0 · Answer 3 · answered Jan 08 '23 at 11:55

I solved this issue by reimporting the intl in the class:

import { useIntl } from "react-intl";

const MyClass = (props) => {

    const intl = useIntl();
    return ( 
      ...
      {intl.formatMessage({ id: "message" })    // <==now it works}
      ...
    )
}

React Intl- Cannot read property 'formatMessage' of undefined

3 Answers3