How to use FormattedMessage for input placeholder in React? – User friendly Tech help
Problem:- How we can translate the placeholder text for input-box using formatmessage?
n
n
nSolution:-
nIf 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.
n
n1. Incase we have one or two values to translate, we can use FormattedMessage as wrapper as shown in below code,
n
import { FormattedMessage } from 'react-intl';nn n { placeholder =>n { this.textInput = input; }}n type="text"n value={searchText}n />n }
n
n
n2.We can also use injectIntl api for achieving the same incase we need more translations to perform.
n
Note:- We can also use FormattedHTMLMessage incase our strings needs to be interpreted as HTML say it contains anchor tag
n
import { FormattedHTMLMessage } from 'react-intl';nn n n
n
Learn more and share more 🙂
Was this article helpful?
YesNo