CODEWITHSUNDEEP
javascriptreactjstranslation
Maksim Tikhonov
Maksim Tikhonov

Reputation: 790

React Lingui - translate input placeholder

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

Upvotes: 3

Views: 868

Answers (1)

Maksim Tikhonov
Maksim Tikhonov

Reputation: 790

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 />)} 
/>

Upvotes: 3

Related Questions