# General Translation React SDKs (gt-react, gt-next): Handling plurals and branches
URL: https://generaltranslation.com/en-US/docs/react/guides/handling-plurals-and-branches.mdx
---

title: Handling plurals and branches
description: How to render count-based and conditional content with the General Translation <Plural> and <Branch> components across React, Next.js, TanStack Start, and React Native.
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

Text that changes with a count or a condition cannot be a single static string, because other languages pluralize and vary differently. Use [`<Plural>`](/docs/react/reference/components/plural) for counts and [`<Branch>`](/docs/react/reference/components/branch) for other conditions so every variation is translated correctly. Both components work the same in every framework; only the import package differs.

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

Pass the count as `n` and provide a child for each plural form. General Translation picks the correct form for the active locale using the locale's 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 your source language uses (commonly `one` and `other`); translators supply the categories each target language needs, such as `zero`, `two`, `few`, and `many`.

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

Use `<Branch>` to choose content based on an arbitrary value. Pass the value as `branch` and provide a child prop for each possible value, plus `children` as the fallback. Import `Branch` from the same package as [`<T>`](/docs/react/reference/components/t).

```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 child is translated independently, so every variation reads naturally in every language.

*Note: The `<Branch>` component ignores any `data-*` attributes. The linter's [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules) rule flags them.*

## Next steps

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