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

{/* GENERADO AUTOMÁTICAMENTE: No edites directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

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

En inglés, tienes que definir dos oraciones diferentes según la cantidad de elementos.
En otros idiomas, puede que tengas que 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 usado para determinar la forma plural.',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: 'Alternativa cuando no coincide con 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 añadir ramas como `singular` y `plural` como parámetros.

### Descripción

| Nombre de la prop | Descripción                                                                                                                                                                                                                                                                                                         |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `n`               | El número usado para determinar la forma plural. Es obligatorio para la pluralización.                                                                                                                                                                                                                              |
| `children`        | Contenido alternativo para renderizar si no se encuentra ninguna rama plural coincidente.                                                                                                                                                                                                                           |
| `locales`         | locales opcionales para especificar la configuración regional de formato. Si no se proporciona, se usa la configuración regional predeterminada del usuario. leer sobre cómo especificar locales [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 el contenido alternativo.

### Genera

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

***

## ¿Qué formas debo agregar?

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"`.

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

***

## Ejemplos

### Uso básico

Usa el componente `<Plural>` para manejar 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

Puedes proporcionar una alternativa 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={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}
```


### Traducir plurales

Para traducir, solo tienes que agregar 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]
    />
  );
}
```


### Agregar variables

¿Qué ocurre si queremos agregar algunas variables a la oración pluralizada?

```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 en `<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 utiliza para manejar la pluralización.
* Las ramas 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).

## Siguientes pasos

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