How to use FormattedMessage in input placeholder

Question

I know there is the similar question here:

React-Intl How to use FormattedMessage in input placeholder

But I am using TypeScript.

this code:

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

ChildComponent.propTypes = {
  intl: intlShape.isRequired
}

does not work for me.

How to set this place holder with formatted message.

<InputPass
  placeholder="Enter password"
/>

score 3 · Accepted Answer · edited Apr 11 '18 at 08:36

You can always use the formatMessage function from react-intl.

So you can do:

<InputPass
    placeholder={intl.formatMessage("messageKey")}
/>

If your issue is more with typing injectIntl with typescript. You can do the following:

interface MyComponentProps {
  /* non injected props */
}
interface MyComponentInjectedProps extends MyComponent {
  intl: InjectedIntl;
}

class MyComponent extends Component<MyComponentInjectedProps, {}> {
    ...
}

export default injectIntl<MyComponentProps>(MyComponent)

Note how we passed ComponentProps as a type argument so when you use the component from elsewhere typescript doesn't complain about the intl property not being passed.

How to use FormattedMessage in input placeholder

1 Answers1