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

Starting from the @gazdagerg 's answer, I have adapted his code in order to:

• having a new component that is a wrapper over an input
• receives an ID of a string from locale conf
• based on the ID, it returns the string in respect to the global locale setting
• handling the situation when the string ID is not set (this caused exception and page to crash)

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


    const InputWithPlaceholder = ({ intl, placeholder }) => {

      const messages = defineMessages({
        placeholder: {
          id: placeholder,
          defaultMessage: '',
        },
      });

      if(messages.placeholder.id) {
        return (
          
        );
      } else {
        return (
          
        );
      }
    };

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

    export default injectIntl(InputWithPlaceholder);

You can use it in other file by:

1. import the new component
2. use it with the ID of the locale string as parameter

import InputWithIntlPlaceholder from 'your/path/to/component/InputWithIntlPlaceholder';

... more code here ...