# General Translation React SDKs (gt-react, gt-next): Gestión de plurales y ramas
URL: https://generaltranslation.com/es/docs/react/guides/handling-plurals-and-branches.mdx
---

title: Gestión de plurales y ramas
description: Cómo renderizar contenido basado en cantidades y condiciones con los componentes <Plural> y <Branch> de General Translation en React, Next.js, TanStack Start y 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

---

El texto que cambia según una cantidad o una condición no puede ser una sola cadena estática, porque otros idiomas forman los plurales y varían de manera diferente. Usa [`<Plural>`](/docs/react/reference/components/plural) para las cantidades y [`<Branch>`](/docs/react/reference/components/branch) para otras condiciones, de modo que cada variación se traduzca correctamente. Ambos componentes funcionan igual en todos los frameworks; solo cambia el paquete de importación.

## Pluraliza con `<Plural>` [#plural]

Pasa el recuento como `n` y proporciona un child para cada forma plural. General Translation elige la forma correcta para la configuración regional activa según las reglas de pluralización de esa configuración regional.

<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>

Proporciona las categorías de plural que usa tu idioma de origen (normalmente `one` y `other`); los traductores aportan las categorías que necesita cada idioma de destino, como `zero`, `two`, `few` y `many`.

## Ramifica según un valor con `<Branch>` [#branch]

Usa `<Branch>` para elegir contenido según un valor arbitrario. Pasa el valor en `branch` y proporciona una prop child para cada valor posible, además de `children` como contenido alternativo. Importa `Branch` desde el mismo paquete que [`<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>;
```

Cada child de branch se traduce de forma independiente, por lo que cada variación suena natural en todos los idiomas.

*Nota: El componente `<Branch>` ignora cualquier atributo `data-*`. La regla [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules) del linter los marca.*
## Next steps

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