'Dynamic Value in Translation

What I am looking to do is have a some way to have a placeholder in my translations file that on runtime when called I can pass in what i18next should replace that placeholder with and I am unable to find documentation on this.

// translations

{
  “label”: “Message has {{count}} total messages”
  “person”: “Welcome {{full_name}} to your new site”
}

In the component I am using it I have the following

<button aria-label={t(‘label’, { count: total_count})}>
 <svg></svg>
</button>

But this is not working. Am I missing something? Thanks



Solution 1:[1]

What you are looking for is called interpolation.

Check out this: https://www.i18next.com/translation-function/interpolation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 adrai