-->

How to use FormattedMessage for input placeholder in React?

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

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, 

        <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.

Learn more and share more :)

0 comments:

Post a Comment

Feel free to share your thoughts and experiences, to enhance Ppl learning.