# General Translation React SDKs (gt-react, gt-next): Gestione dei plurali e delle condizioni
URL: https://generaltranslation.com/it/docs/react/guides/handling-plurals-and-branches.mdx
---
title: Gestione dei plurali e delle condizioni
description: Come visualizzare contenuti basati su quantità e condizioni con i componenti <Plural> e <Branch> di General Translation in React, Next.js, TanStack Start e React Native.
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

Un testo che cambia in base a una quantità o a una condizione non può essere un&#39;unica stringa statica, perché le altre lingue gestiscono plurali e varianti in modo diverso. Usa [`<Plural>`](/docs/react/reference/components/plural) per le quantità e [`<Branch>`](/docs/react/reference/components/branch) per le altre condizioni, così ogni variante viene tradotta correttamente. Entrambi i componenti funzionano allo stesso modo in tutti i framework; cambia solo il pacchetto da importare.

## Gestisci il plurale con `<Plural>` [#plural]

Passa il numero come `n` e fornisci un elemento figlio per ogni forma plurale. General Translation seleziona la forma corretta per l&#39;impostazione regionale attiva in base alle relative regole di pluralizzazione.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Plural, Num } from 'gt-react';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Plural, Num } from 'gt-next';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Plural, Num } from 'gt-tanstack-start';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Plural, Num } from 'gt-react-native';

    <T>
      <Plural
        n={count}
        one={<Text>You have <Num>{count}</Num> message.</Text>}
        other={<Text>You have <Num>{count}</Num> messages.</Text>}
      />
    </T>;
    ```
  </Tab>
</Tabs>

Specifica le categorie plurali usate dalla tua lingua sorgente (di solito `one` e `other`); i traduttori forniranno le categorie necessarie per ogni lingua di destinazione, ad esempio `zero`, `two`, `few` e `many`.

## Dirama in base a un valore con `<Branch>` [#branch]

Usa `<Branch>` per scegliere il contenuto in base a un valore arbitrario. Passa il valore come `branch` e specifica una prop child per ogni valore possibile, oltre a `children` come fallback. Importa `Branch` dallo stesso pacchetto di [`<T>`](/docs/react/reference/components/t).

```tsx
<T>
  <Branch
    branch={plan}
    free={<p>Upgrade to unlock more.</p>}
    pro={<p>Thanks for going Pro!</p>}
  >
    <p>Welcome.</p>
  </Branch>
</T>;
```

Ogni elemento figlio del branch viene tradotto in modo indipendente, così ogni variante risulta naturale in ogni lingua.

*Nota: il componente `<Branch>` ignora qualsiasi attributo `data-*`. La regola [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules) del linter li segnala.*
## Next steps

- /docs/react/guides/formatting-variables
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/translating-with-dictionaries