# gt-react: General Translation React SDK: Plural
URL: https://generaltranslation.com/es/docs/react/api/components/plural.mdx
---
title: Plural
description: Referencia de la API del componente Plural
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita la plantilla en content/docs-templates/. */}


## Descripción general

Usamos el componente `<Plural>` para gestionar la concordancia en las oraciones.
Piensa en la diferencia entre las oraciones: &quot;Tienes un elemento.&quot; y &quot;Tienes dos elementos.&quot;

En inglés, debes definir dos oraciones distintas según la cantidad de elementos.
En otros idiomas, puede que debas definir hasta seis.

```jsx
const count = 1;
<Plural n={count}
  one={You have one item.}
  other={You have some items.}
/>
```


## Referencia

### Props

<TypeTable
  type={{
  "n": {
    description: 'El número que se usa para determinar la forma plural.',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: 'Valor de respaldo cuando no coincide ninguna forma plural',
    type: 'any',
    optional: true,
    default: 'undefined',
  },
  "locales?": {
    type: 'string[]',
    optional: true,
    default: 'undefined',
  },
  "[key]: string": {
    type: 'string | JSX.Element',
    optional: false,
  },
}}
/>

La sintaxis `[key]: string` indica claves arbitrarias que representan posibles ramas de pluralización.
Por ejemplo, se pueden agregar como parámetros ramas como `singular` y `plural`.

### Descripción

| Nombre de la prop | Descripción                                                                                                                                                                                                                                                                                                                                               |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `n`               | El número que se usa para determinar la forma plural. Es obligatorio para la pluralización.                                                                                                                                                                                                                                                               |
| `children`        | Contenido de respaldo que se renderiza si no se encuentra ninguna rama plural coincidente.                                                                                                                                                                                                                                                                |
| `locales`         | Configuraciones regionales opcionales para especificar la configuración regional de formato. Si no se proporciona, se usa la configuración regional predeterminada del usuario. Lee más sobre cómo especificar configuraciones regionales [aquí](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |
| `[key]: string`   | Ramas que representan formas plurales. Las ramas exactas dependen de la configuración regional.                                                                                                                                                                                                                                                           |

### Devuelve

`JSX.Element` que contiene el contenido correspondiente a la forma plural de `n` o, en su defecto, el contenido de respaldo.

### Genera

`Error` si no se proporciona `n` o si no es un número válido.

***

## ¿Qué formas debo añadir?

Solo necesitas usar las formas de plural de tu idioma.

Las formas posibles son: `"singular"`, `"plural"`, `"dual"`, `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, `"other"`.

* Si eres un desarrollador que usa `"en-US"`, usa solo dos: `"singular"` y `"plural"`.
* Si eres un desarrollador que usa `"zh-CN"`, usa solo `"other"`.

Lee más sobre las distintas formas [aquí](https://cldr.unicode.org/index/cldr-spec/plural-rules).

***

## Ejemplos

### Uso básico

Usa el componente `<Plural>` para gestionar la pluralización.

```jsx title="BasicExample.jsx" copy
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.}
    />
  );
}
```


### Alternativas de respaldo

Puedes proporcionar una alternativa de respaldo en caso de que el valor pasado a `n` no coincida con ninguna rama.

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      one={Tienes un artículo.}
    >
      Tienes algunos artículos. // [!code highlight]
    </Plural>
  );
}
```


### Traducir plurales

Todo lo que tienes que hacer para traducir es añadir el componente `<T>`.

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

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


### Añadir variables

¿Qué pasa si queremos añadir variables a la frase en plural?

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

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

Dentro de un componente `<T>`, envuelve todo el contenido dinámico con `<Currency>`, `<DateTime>`, `<Num>` o `<Var>`.

```jsx
<T id="itemCount">
  <Plural n={count}
    one={You have <Num>{count}</Num> item.} // [!code highlight]
    other={You have <Num>{count}</Num> items.} // [!code highlight]
  />
</T>
```

***


## Notas

* El componente `<Plural>` se usa para manejar la pluralización.
* Las categorías de plural disponibles (p. ej., one, other, few, many) dependen de la configuración regional y siguen las [reglas de pluralización de Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules).

## Próximos pasos

* Para ver más ejemplos, consulta la documentación de referencia sobre [cómo usar Branching Components](/docs/react/guides/branches).
* Para un uso más avanzado, combina `<Plural>` con componente de variable como `<Currency>`, `<DateTime>`, `<Num>` y `<Var>`. Lee más sobre [cómo usar componentes de variable](/docs/react/guides/variables).