# General Translation React SDKs (gt-react, gt-next, gt-react-native): Handling plurals and branches
URL: https://generaltranslation.com/en-US/docs/react/guides/handling-plurals-and-branches.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: How to handle React pluralization and conditional translated content with `<Plural>` and `<Branch>`.

Different locales use different plural forms: English usually has `one` and `other`, while some languages need additional forms.

Use [`<Plural>`](/docs/react/reference/components/plural) for count-based wording, and use [`<Branch>`](/docs/react/reference/components/branch) for other conditional content.

## Choose plurals or branches [#choose]

- Use [`<Plural>`](/docs/react/reference/components/plural) when a number determines the wording, such as message counts or search results.
- Use [`<Branch>`](/docs/react/reference/components/branch) when a status, plan, boolean, or other value determines the content.
- Place either component inside [`<T>`](/docs/react/reference/components/t) so every variation can be translated.
- Wrap dynamic values inside each variation with a [variable component](/docs/react/guides/formatting-variables), such as [`<Num>`](/docs/react/reference/components/num) or [`<Var>`](/docs/react/reference/components/var).

Both components work the same across React, Next.js, TanStack Start, and React Native. Only the import package differs.

## Pluralize with `<Plural>` [#plural]

Do not build plurals by checking `count === 1` or appending an `s`; that only models English grammar. Pass the count as [`n`](/docs/react/reference/components/plural#n), then provide the forms used by your source language. [`<Plural>`](/docs/react/reference/components/plural) selects the correct form with the active locale's [Unicode CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules).

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Plural, Num } from 'gt-react';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Plural, Num } from 'gt-next';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Plural, Num } from 'gt-tanstack-start';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Plural, Num } from 'gt-react-native';

    <T>
      <Plural
        n={count}
        one={<Text>You have <Num>{count}</Num> message.</Text>}
        other={<Text>You have <Num>{count}</Num> messages.</Text>}
      />
    </T>;
    ```
  </Tab>
</Tabs>

Provide the [`plural categories`](/docs/react/reference/components/plural#form) your source language uses—commonly `one` and `other` for English. Translators supply categories required by each target language, which may include `zero`, `two`, `few`, and `many`.

If the exact category is unavailable, [`<Plural>`](/docs/react/reference/components/plural) uses the `plural` branch, then `other`. [`children`](/docs/react/reference/components/plural#children) renders only when neither generic branch exists:

```tsx
<T>
  <Plural n={count} one={<>One result</>}>
    <Num>{count}</Num> results
  </Plural>
</T>;
```

## Branch on a value with `<Branch>` [#branch]

Use [`<Branch>`](/docs/react/reference/components/branch) when content depends on a value other than a count. Pass the value as [`branch`](/docs/react/reference/components/branch#branch), add a [prop for each expected value](/docs/react/reference/components/branch#value), and use [`children`](/docs/react/reference/components/branch#children) as the fallback.

```tsx
<T>
  <Branch
    branch={plan}
    free={<p>Upgrade to unlock more.</p>}
    pro={<p>Thanks for going Pro!</p>}
  >
    <p>Welcome.</p>
  </Branch>
</T>;
```

Each branch is translated independently, so translators can adapt its complete wording instead of working around an inline JavaScript conditional.

### Replace conditionals inside `<T>`

An inline ternary makes the children of [`<T>`](/docs/react/reference/components/t) dynamic and prevents reliable extraction. Represent the same condition with [`<Branch>`](/docs/react/reference/components/branch):

```tsx
// ❌ Inline conditional
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ Translatable branches
<T>
  <Branch branch={isActive} true="Active">
    Inactive
  </Branch>
</T>;
```

*Note: [`<Branch>`](/docs/react/reference/components/branch) ignores `data-*` attributes because non-reserved props represent branch values. Put test IDs and other data attributes on a wrapper element; the [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs) lint rule flags this mistake.*

## Next steps

- /docs/react/guides/formatting-variables
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/translating-with-dictionaries

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.