React Lingui - translate input placeholder

user_4262150 0
Viewed 379

I have a problem with translation placeholder prop for input. I have a wrapper component <Text /> which renders <input> one. I've tried to translate placholder this way:

import { Trans, t } from '@lingui/macro'

const passwordPlaceholder = t('password.placeholder')`Enter password`

// this doesn't works
<Text as='input' type='password' name='password' placeholder={t(passwordPlaceholder)} required />

// neither
<Text as='input' type='password' name='password' placeholder={<Trans id={passwordPlaceholder} />} />

// not
<Text as='input' type='password' name='password' placeholder={passwordPlaceholder} />

I tried a lot of time to solve this problem, no solution found...

reactjs translation javascript
1 Answers

The solution was suggested by my former colleague, using render function with object parameter contains 'translation' property. I hope this answer helps someone.

    <Trans id={passwordPlaceholder} render={({translation}) => (
     <Text as='input' type='password' name='password' placeholder={translation} required />)} 
/>

user_42621500
Related