# General Translation React SDKs (gt-react, gt-next, gt-react-native): 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 manejar la pluralización en React y el contenido traducido condicional con <Plural> y <Branch>.
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

Las distintas configuraciones regionales usan diferentes formas plurales: el inglés suele tener `one` y `other`, mientras que algunos idiomas necesitan formas adicionales.

Usa [`<Plural>`](/docs/react/reference/components/plural) para textos basados en cantidades y [`<Branch>`](/docs/react/reference/components/branch) para otro contenido condicional.

## Elige plurales o ramas [#choose]

* Usa [`<Plural>`](/docs/react/reference/components/plural) cuando un número determine el texto, como en los recuentos de mensajes o los resultados de búsqueda.
* Usa [`<Branch>`](/docs/react/reference/components/branch) cuando un estado, plan, valor booleano u otro valor determine el contenido.
* Coloca cualquiera de los dos componentes dentro de [`<T>`](/docs/react/reference/components/t) para que se pueda traducir cada variante.
* Encierra los valores dinámicos de cada variante en un [componente variable](/docs/react/guides/formatting-variables), como [`<Num>`](/docs/react/reference/components/num) o [`<Var>`](/docs/react/reference/components/var).

Ambos componentes funcionan igual en React, Next.js, TanStack Start y React Native. Solo difiere el paquete de importación.

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

No generes plurales comprobando `count === 1` ni añadiendo una `s`; eso solo sirve para la gramática inglesa. Pasa el recuento como [`n`](/docs/react/reference/components/plural#n) y proporciona las formas que usa tu idioma de origen. [`<Plural>`](/docs/react/reference/components/plural) selecciona la forma correcta para la configuración regional activa según las [reglas de plural de Unicode CLDR](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>

Proporciona las [`categorías de plural`](/docs/react/reference/components/plural#form) que usa tu idioma de origen; normalmente `one` y `other` para el inglés. Los traductores aportan las categorías que necesita cada idioma de destino, como `zero`, `two`, `few` y `many`.

Si ninguna categoría coincide, [`children`](/docs/react/reference/components/plural#children) se muestra como contenido alternativo:

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

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

Usa [`<Branch>`](/docs/react/reference/components/branch) cuando el contenido depende de un valor distinto de un recuento. Pasa el valor como [`branch`](/docs/react/reference/components/branch#branch), agrega una [prop para cada valor esperado](/docs/react/reference/components/branch#value) y usa [`children`](/docs/react/reference/components/branch#children) como contenido alternativo.

```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 rama se traduce de forma independiente, por lo que los traductores pueden adaptar toda su redacción en lugar de tener que sortear una condicional inline de JavaScript.

### Sustituye condicionales dentro de `<T>`

Un ternario inline hace que los elementos secundarios de [`<T>`](/docs/react/reference/components/t) sean dinámicos e impide extraerlos de forma fiable. Representa la misma condición con [`<Branch>`](/docs/react/reference/components/branch):

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

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

*Nota: [`<Branch>`](/docs/react/reference/components/branch) ignora los atributos `data-*` porque los props no reservados representan valores de rama. Coloca los ID de prueba y otros atributos de datos en un elemento envolvente; la regla de lint [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs) detecta este error.*
## Next steps

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