React Academy · Lesson

Pluralisation & Interpolation

Handle count-based plural forms and insert dynamic values into translated strings.

Pluralisation & Interpolation is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will handle count-based plural forms and insert dynamic values into translated strings using i18next interpolation and plural support.

Interpolation Basics

Use double curly braces in your translation strings as placeholders. Pass an object with the variable values as the second argument to t().

// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Multiple Interpolation Variables

You can use as many interpolation variables as needed in a single string.

// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Escaping HTML

By default, i18next escapes HTML characters in interpolated values. To render HTML inside an interpolated value, set `escapeValue: false` in the init config (already safe in React since React escapes JSX).

Plural Forms

i18next supports plural forms automatically. Define `key` for singular and `key_other` (or `key_plural`) for plural. Pass `count` in the interpolation object.

// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

Language-Specific Plural Rules

Different languages have different plural rules. Russian has 4 plural forms; Arabic has 6. i18next uses Unicode CLDR rules for each language automatically. Define all required forms in the translation file.

// Russian (ru):
// key_one, key_few, key_many, key_other

Zero Form

i18next also supports a special `key_zero` form for when count is 0, allowing different wording (e.g. 'No items' instead of '0 items').

// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

Nested Keys with Plurals

You can have plural keys inside nested objects. Use dot notation to access them just like regular nested keys.

// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Date and Number Formatting

i18next integrates with the Intl API for locale-aware date and number formatting. Use i18n.format() or the intlify plugin to format dates as part of translations.

t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Context-Based Translations

Use the `context` option for grammatically different forms in different contexts (e.g. gendered words). Define `key_male` and `key_female` variants in the translation file.

// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Quick Check

How do you pass a dynamic value named 'username' into a translation string with i18next?

Recap

Use {{variable}} for interpolation, key_other/key_one for plurals, and key_zero for zero forms. i18next applies Unicode CLDR plural rules automatically per language. Use context for grammatical variants.

Up Next

Next lesson: **Language Switcher & Lazy-Loading Translations** — you will build a locale toggle and load translation bundles on demand.

Frequently asked questions

Is the “Pluralisation & Interpolation” lesson free?

Yes — the full text of “Pluralisation & Interpolation” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Pluralisation & Interpolation”?

Handle count-based plural forms and insert dynamic values into translated strings. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pluralisation & Interpolation” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Setting Up react-i18next
Using the useTranslation Hook
Pluralisation & Interpolation
Language Switcher & Lazy-Loading Translations

← Back to React Academy