Translate State Value

I have a state string I’m translating like this:

this.setState({ errorMessage: t('This email address is already in use.') + t('Please try again.') });

<div>{this.state.errorMessage}</div>

When the page first loads the translation works. If I change the language it’s not translated. Should this work or is it a bug?

[jamuhl]

That’s expected. Changing the language does trigger a rerender on the component tree -> but components do not get recreated -> so the content of state.errorMessage still is a translated string that was set in old language.

So better solution is setting the key to state and using t function inside render:

//...
<div className="error">{t(this.state.errorMessageKey)}</div>
//...

This way you can even show a generic error if that is not found like: https://www.i18next.com/essentials.html#multiple-fallback-keys

Further you should avoid string concatenation t('This email address is already in use.') + t('Please try again.') -> this makes translating to other languages harder; Simpler just use the nesting feature of i18next: t('This email address is already in use. ${Please try again.}')

-> https://www.i18next.com/nesting.html

[ghost]

@jamuhl It’s working well. Thank you