# General Translation Knowledge Base: ¿Cómo gestiono los plurales en React? URL: https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx Docs index: https://generaltranslation.com/llms.txt Description: No codifiques la lógica de pluralización a mano con comprobaciones como n === 1. Para aplicaciones solo en inglés basta con una pequeña función auxiliar, pero las aplicaciones multilingües necesitan reglas de pluralización adaptadas a la configuración regional, y un componente de i18n como `` de gt-react o gt-next se encarga de ellas en todos los idiomas. Category: Formato según la configuración regional Last updated: 2025-02-17 Authors: Archie McKenzie Published: 2025-02-17 ## Video The video is narrated in English, with English captions. [How do I handle plurals in React?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-how-to-handle-plurals-in-react.mp4) (48 s) General Translation handles plurals in React with the `Plural` component. Run `npx gt init` and sign in, give `Plural` the count and an English sentence for each form, wrap it in a `T` component with the count in `Num`, then run `npx gt translate` to write the forms each language needs. ## Por qué es importante la pluralización en React A menudo nos encontramos con aplicaciones que muestran mensajes torpes como: ```text Tienes 1 mensaje(s) nuevo(s) ``` Es una señal inequívoca de un desarrollador que no ha pensado detenidamente en la experiencia de usuario. Las aplicaciones de React suelen necesitar gestionar la pluralización: en contadores de notificaciones, longitudes de listas o resultados de búsqueda. **Y no es tan difícil hacer bien la pluralización, sobre todo si tu aplicación solo tiene que estar en inglés.** Pero hay muchas malas prácticas en las que caen los desarrolladores principiantes, especialmente al crear interfaces multilingües. Esta guía explica cómo gestionar los plurales en inglés de forma limpia, dar formato a números según la configuración regional y crear un sistema de plurales totalmente multilingüe en React y Next.js. ### El problema de los plurales escritos directamente en el código Muchos proyectos —incluidos algunos sorprendentemente grandes e importantes— escriben la lógica de pluralización directamente en el código. ```jsx export default function Example({ n }) { return (

Displaying {n} item{n === 1 ? '' : 's'}

) } ``` Pero la pluralización suele ser más compleja que simplemente añadir una "s" al final de una palabra. Algunos sustantivos tienen formas plurales irregulares, como "child" y "children" en inglés. A veces, otras partes de la oración también deben cambiar para concordar con el sustantivo, como "is" y "are" según la cantidad. La siguiente tabla muestra algunos escenarios comunes: | Escenario | Ejemplos | Notas | | ------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Número de espectadores | "1 person is watching"
"2 people are watching" | Hay que cambiar el sustantivo irregular ("person" → "people") y el verbo. | | Eliminación de elementos | "Delete this message?"
"Delete these 2 messages?" | Cambia el demostrativo ("this" frente a "these"), además de la pluralización del sustantivo. | | Resultados de búsqueda | "No results"
"1 result found"
"2 results found" | Redacción distinta para cero, uno y varios resultados. | Las expresiones condicionales se vuelven inmanejables enseguida. Y todo se convierte en una pesadilla cuando necesitas lanzar tu aplicación en otros idiomas. Lo que funciona en inglés suele fallar por completo en idiomas como el polaco o el árabe, que tienen reglas totalmente distintas para expresar cantidades. **Muchas de las empresas con las que trabajamos posponen la internacionalización por lo engorroso que resulta refactorizar UI con texto fijo en el código como esta.** *** ## Cómo gestionar los plurales en inglés En inglés, usar los plurales correctos en tu aplicación suele ser sencillo. Para la pluralización simple de sustantivos, escribe una función auxiliar: ```jsx export function pluralize( count: number, singular: string, plural: string = singular + 's' ) { return `${count === 1 ? singular : plural}`; } ``` Ahora hay una sola función para gestionar toda tu lógica de pluralización, y también funciona con plurales irregulares: ```js pluralize(2, 'user') // "users" pluralize(2, 'person', 'people') // "people" pluralize(2, 'child', 'children') // "children" ``` Pero ¿y si necesitas una lógica más compleja? Por ejemplo: ```text "No one is watching" "1 person is watching" "2 people are watching" ``` Llegados a este punto, conviene plantearse seriamente usar una biblioteca de internacionalización ("i18n") que requiera poco mantenimiento. Aunque los desarrolladores suelen pensar que las bibliotecas de i18n solo sirven para interfaces multilingües, pueden ser muy útiles para dar formato a plurales y variables incluso en aplicaciones de un solo idioma. Internamente, la mayoría de las bibliotecas de i18n usan la API integrada de JavaScript `Intl.PluralRules` para determinar la forma plural correcta en cualquier idioma. Existen muchas bibliotecas de i18n para React, entre ellas la nuestra, [`gt-react`](/docs/react/overview) (o [`gt-next`](/docs/react/nextjs-quickstart) si usas Next.js). Mostrar un plural en inglés con gt-react es muy sencillo: ```jsx import { Plural } from 'gt-react' function Example({ count }) { return ( {count} people are watching ) } ``` La UI se renderiza de forma condicional según el valor de `n`. La mayoría de las bibliotecas utilizan la API [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) de JavaScript para decidir qué forma plural mostrar. Esto significa que, en inglés, se usaría el nombre `"one"` para referirse al singular y `"other"` para referirse al plural. Nuestro componente [``](/docs/react/reference/components/plural) comprueba primero la categoría plural exacta y, a continuación, las props genéricas `plural` y `other`. Solo recurre a sus hijos cuando no hay ninguna de esas props disponible. Usar una biblioteca en este caso es una buena práctica incluso en aplicaciones que solo están en inglés, y facilita mucho su internacionalización en el futuro. *** ## Pluralización en aplicaciones React multilingües (i18n) Si tu aplicación solo está dirigida a usuarios angloparlantes, es posible que el enfoque anterior sea todo lo que necesitas, pero la mayoría de las aplicaciones en producción acaban teniendo que admitir varios idiomas. Ahí es donde la cosa se pone interesante. * En árabe, los sustantivos cambian de forma según haya cero, uno, dos o muchos * En configuraciones regionales como `de-DE`, `es-ES` e `it-IT`, los números grandes usan puntos en lugar de comas, así que 1,000,000 pasa a ser 1.000.000 * En hindi, los dígitos se agrupan de dos en dos, así que 1,000,000 pasaría a ser 10,00,000 **Para una aplicación internacionalizada, conviene usar una biblioteca de i18n específica**, que contará con su propia documentación sobre cómo gestionar los plurales y el formato de números. ### Dar formato a números para distintas configuraciones regionales Puedes usar el objeto `Intl` para [dar formato a números](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) en cualquier configuración regional. La forma más sencilla de hacerlo es con el método integrado `toLocaleString()`. De forma predeterminada, usa la configuración regional actual del entorno de ejecución: ```javascript const n = 1000000 n.toLocaleString() // muestra 1,000,000 cuando la configuración regional del entorno de ejecución es "en-US" (inglés estadounidense) n.toLocaleString('de') // 1.000.000 porque se especificó "de" (alemán) como configuración regional ``` gt-react también ofrece un componente [``](/docs/react/reference/components/num) que, internamente, se basa en `Intl.NumberFormat`. ```jsx import { Num } from 'gt-react' // muestra 1,000,000 cuando el idioma es "en-US" // muestra 1.000.000 cuando el idioma es "de" // muestra 10,00,000 cuando el idioma es "hi" export default function Example() { return 1000000 } ``` ### Cómo funcionan las formas plurales en distintos idiomas Las seis formas plurales que admite la API `Intl.PluralRules` de JavaScript son: `zero`, `one`, `two`, `few`, `many` y `other`. Aunque el inglés solo usa `one` ("singular") y `other` ("plural"), idiomas como el árabe y el polaco tienen más de estas dos formas. Por ejemplo, un usuario angloparlante podría esperar: ```text "No one is watching" "1 person is watching" "2 people are watching" ``` En cambio, un usuario que habla árabe podría esperar expresiones distintas para el singular, el dual (cuando hay exactamente dos elementos) y las formas plurales para cantidades pequeñas y grandes: ```text "لا أحد يشاهد" "1 شخص يشاهد" "2 شخصان يشاهدان" "3 أشخاص يشاهدون" "11 شخصاً يشاهدون" ``` Aquí es donde una biblioteca de internacionalización se vuelve imprescindible. Cada idioma tiene su propia lógica sobre cuándo y cómo mostrar los plurales, así que es mejor recurrir a una biblioteca especializada para hacerlo bien. Una buena biblioteca de i18n se encarga de dos cosas: 1. Decidir qué forma plural (`one`, `many`, `other`, etc.) usar según la configuración regional 2. Encontrar la traducción en el idioma correcto que corresponde a esa forma **Si ya usas una biblioteca de internacionalización, consulta su documentación para obtener información sobre el formato de plurales.** Casi todas las bibliotecas tienen documentación específica sobre cómo renderizar plurales. ### Ejemplo completo: plurales en una aplicación React multilingüe Si todavía no tienes una biblioteca de internacionalización, ¡prueba [`gt-react`](/docs/react/react-quickstart)! El componente [``](/docs/react/reference/components/plural) de gt-react: * Ofrece una forma sencilla y declarativa de renderizar plurales correctamente en React * Funciona de forma nativa con el componente de formato [``](/docs/react/reference/components/num) * Funciona de forma nativa con el componente de traducción [``](/docs/react/reference/components/t), que se integra con nuestro [servicio de traducción](https://generaltranslation.com) para generar automáticamente las formas plurales Si juntamos todas las piezas, obtenemos un componente multilingüe completo: ```jsx import { T, Plural, Num } from 'gt-react' // Funciona sin configuración adicional en más de 100 idiomas function Example({ count }) { return ( {count} person is watching } > {count} people are watching ) } ``` *** Configura la pluralización con el [Inicio rápido de `gt-react`](/docs/react/react-quickstart) para aplicaciones de React o con el [Inicio rápido de `gt-next`](/docs/react/nextjs-quickstart) para aplicaciones de Next.js. Consulta la [referencia de la API de ``](/docs/react/reference/components/plural) para ver la API completa del componente. La pluralización es uno de los retos de i18n más habituales en React: resolverla bien desde el principio te ahorrará mucha refactorización más adelante. ## Related questions - [¿Cómo traduzco texto condicional en JSX?](https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx): En lugar de traducir por separado cada rama de un operador ternario, envuelve la oración completa en un componente `` y expresa la condición con ``; así, el traductor ve el contexto completo y puede reordenar la oración según cada idioma. - [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx): Sí. Con gt-react o gt-next, el contenido se mantiene inline en tus componentes, dentro de un componente ``, y las traducciones se generan en tiempo de compilación, por lo que no tienes que escribir claves ni archivos JSON por configuración regional ni mantenerlos sincronizados. - [General Translation vs. Weblate: ¿cuál deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-weblate.mdx): Weblate es una plataforma de localización autoalojable y basada en Git, pensada para traducir los archivos de un repositorio junto con una comunidad o un equipo. General Translation integra la generación de traducciones en el desarrollo y los lanzamientos mediante JSX marcado y contexto compartido del producto. Conserva tus archivos de gettext o adopta la redacción inline para eliminar también el mantenimiento del catálogo de origen. ## Previous and next questions - Next question: [¿Cómo traduzco texto condicional en JSX?](https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.