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?

nn

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

Similar Posts