# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Plural>`
URL: https://generaltranslation.com/es/docs/react/reference/components/plural.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Renderiza contenido en función de un conteo usando las reglas de plural de la configuración regional activa. Referencia de la API para el componente `<Plural>`.

El componente `<Plural>` cambia su redacción en función de un conteo para que la frase concuerde con el número en cada idioma. El inglés necesita dos (&quot;one item&quot; / &quot;two items&quot;), mientras que otros idiomas pueden necesitar hasta seis.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`.*

## Descripción general [#overview]

Pasa el conteo como `n` y proporciona la prop `child` para cada forma plural.

```tsx
<Plural
  n={count}
  one={<>You have one item.</>}
  other={<>You have some items.</>}
/>
```

*Nota: coloca `<Plural>` dentro de un [`<T>`](/docs/react/reference/components/t) para traducir sus ramas y envuelve los valores dinámicos dentro de ellas en un componente de variable como [`<Num>`](/docs/react/reference/components/num).*

## Cómo funciona [#how-it-works]

* **Selección según la configuración regional.** El valor de `n` se asigna a una categoría de plural según las [reglas de plural de Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) de la configuración regional activa. Se renderiza la rama de esa categoría.

- **Rama alternativa.** Si la categoría seleccionada no está disponible, `<Plural>` usa `plural` y luego `other`. Solo renderiza `children` cuando no existe ninguna de las ramas genéricas.

* **Usa contenido alternativo cuando no hay número.** Si falta `n` o no es un número válido, `<Plural>` renderiza `children` como contenido alternativo en lugar de lanzar un error.

<Callout type="info">
  **Cambiado en v11.1.8:** Las categorías `zero` y `one` faltantes ahora recurren a
  `plural` u `other` antes de `children`, al igual que ya ocurría con
  `two`, `few` y `many`.
</Callout>

## Qué formas añadir [#forms]

Solo necesitas las formas de plural que use tu idioma. Las formas posibles son `zero`, `one`, `two`, `few`, `many`, `other`, además de los aliases `singular`, `dual` y `plural`.

* En `en-US`, usa `one` y `other` (o `singular` y `plural`).
* En `zh-CN`, solo hace falta `other`.

Consulta las [reglas de plural de CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) para ver las formas de cada idioma.

## Props [#props]

| Prop                    | Descripción                                                                    | Type        | Opcional | Predeterminado                |
| ----------------------- | ------------------------------------------------------------------------------ | ----------- | -------- | ----------------------------- |
| [`n`](#n)               | El número que selecciona la forma plural.                                      | `number`    | No       | —                             |
| [`children`](#children) | Contenido alternativo final si no coincide ninguna categoría ni rama genérica. | `ReactNode` | Sí       | —                             |
| [`locales`](#locales)   | Configuración regional que reemplaza la activa para las reglas de plural.      | `string[]`  | Sí       | configuración regional activa |
| [`[form]`](#form)       | Contenido para una categoría de plural.                                        | `ReactNode` | Sí       | —                             |

### `n` [#n]

**Tipo** `number` · **Obligatorio**

El número que se usa para determinar la forma plural. Si falta o no es un número válido, `<Plural>` renderiza `children` como contenido alternativo en lugar de lanzar un error.

### `children` [#children]

**Tipo** `ReactNode` · **Opcional**

Contenido alternativo que se muestra cuando ninguna categoría exacta ni rama `plural` u `other` coincide con `n`.

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Configuración regional activa

Configuraciones regionales cuyas reglas de plural se aplican. Si se omite, se usa la configuración regional activa.

### `[form]` [#form]

**Type** `ReactNode` · **Opcional**

Una propiedad por categoría de plural: `zero`, `one`, `two`, `few`, `many`, `other` (o los alias `singular`, `dual` y `plural`). Las categorías disponibles dependen de la configuración regional.

## Ejemplos [#examples]

*Los ejemplos se importan desde `gt-react`; en su lugar, importa desde el package de tu framework.*

```tsx title="BasicExample.tsx"
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural
      n={count} // [!code highlight]
      one={<>You have one item.</>}
      other={<>You have some items.</>}
    />
  );
}
```

```tsx title="FallbackExample.tsx"
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} one={<>You have one item.</>}>
      You have some items. // [!code highlight]
    </Plural>
  );
}
```

```tsx title="PluralExample.tsx"
import { T, Plural, Num } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> item.</>} // [!code highlight]
        other={<>You have <Num>{count}</Num> items.</>} // [!code highlight]
      />
    </T>
  );
}
```

## Notas [#notes]

* `<Plural>` se encarga de la pluralización según la configuración regional activa.
* Las ramas disponibles dependen de la configuración regional y siguen las [reglas de plural de Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules).
* **Componente relacionado:** [`<Branch>`](/docs/react/reference/components/branch) se encarga de la ramificación basada en valores arbitrarios.

## Sitemap

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