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

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


## Resumen

Usamos el componente `<Plural>` para manejar la concordancia en las oraciones.
Piensa en la diferencia entre las oraciones: &quot;You have one item.&quot; y &quot;You have two items.&quot;

En inglés, tienes que definir dos oraciones diferentes según la cantidad de elementos.
En otros idiomas, tienes que definir hasta seis.

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


## Referencia

### Propiedades

<TypeTable
  type={{
  "n": {
    description: 'El número que se usa para determinar la forma plural.',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: 'Alternativa cuando no hay formas plurales que coincidan',
    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, puedes añadir ramas como `singular` y `plural` como parámetros.

### 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 alternativo que se renderiza si no se encuentra ninguna rama plural que coincida.                                                                                                                                                                                                                         |
| `locales`         | locales 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 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` con el contenido correspondiente a la forma plural de `n`, o el contenido alternativo.

### Lanza

`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 desarrollador y usas `"en-US"`, usa solo dos: `"singular"` y `"plural"`.
* Si eres desarrollador en `"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 manejar la pluralización.

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

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-native';

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


### Traducción de 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-native';

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é pasa si queremos añadir variables a la oración en plural?

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

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 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 [el uso de componentes de bifurcación](/docs/react-native/guides/branches).
* Para casos de uso más avanzados, combina `<Plural>` con componentes de variable como `<Currency>`, `<DateTime>`, `<Num>` y `<Var>`. Lee más sobre [el uso de componentes Variable](/docs/react-native/guides/variables).