How to use FormattedMessage for input placeholder in React?

Problem:- How we can translate the placeholder text for input-box using formatmessage?

Solution:-
If we use react-intl its not meant to be used with  placeholders, alternate text, etc. They render HTML, not plain text, which is not useful in our scenario.

1. Incase we have one or two values to translate, we can use FormattedMessage as wrapper as shown in below code, 

import { FormattedMessage } from 'react-intl';

        <FormattedMessage id="SEARCH_FOR_GROUPS">
          { placeholder =>
            <input
              className="search-filter"
              disabled={allGroups}
              onChange={this.handleSearchChange}
              placeholder={placeholder}
              ref={(input) => { this.textInput = input; }}
              type="text"
              value={searchText}
            />
          }

2.We can also use injectIntl api for achieving the same incase we need more translations to perform.

Note:- We can also use FormattedHTMLMessage incase our strings needs to be interpreted as HTML say it contains anchor tag <a href=”#” />

import {  FormattedHTMLMessage } from 'react-intl';

 <div className={styles.Header}>
        <FormattedHTMLMessage id="ERROR_PAGE_CONTENT" />
 </div>

Learn more and share more 🙂