React-Intl How to use FormattedMessage in input placeholder

Question

I\'m unsure how to get the values from

into a placeholder format like input:<

Answer 1

Based on the react intl wiki the implementation of an input box with translatable placeholder will look like:

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

const messages = defineMessages({
  placeholder: {
    id: 'myPlaceholderText',
    defaultMessage: '{text} and static text',
  },
});

const ComponentWithInput = ({ intl, placeholderText }) => {
  return (
    
  );
};

ComponentWithInput.propTypes = {
  intl: intlShape.isRequired
};

export default injectIntl(ComponentWithInput);

and the useage of it:

import ComponentWithInput from './component-with-input';
...
render() {
  
}
...

The id: 'myPlaceholderText', part is necessary to enable the babel-plugin-react-intl to collect the messages for translation.