# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Branch>`
URL: https://generaltranslation.com/it/docs/react/reference/components/branch.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Visualizza il contenuto in modo condizionale in base a un valore. Riferimento API per il componente `<Branch>`.

Il componente `<Branch>` aggiunge logica condizionale a una traduzione. Passa un valore a `branch` e renderizza il child corrispondente.

*Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`.*

## Panoramica [#overview]

Specifica un valore `branch` e una prop `child` per ciascun valore possibile.

```tsx
<Branch
  branch={status}
  active={<p>The user is active.</p>}
  inactive={<p>The user is inactive.</p>}
/>
```

*Nota: inserisci `<Branch>` all&#39;interno di un [`<T>`](/docs/react/reference/components/t) per tradurre le diramazioni e racchiudi i valori dinamici al loro interno in un componente variabile come [`<Var>`](/docs/react/reference/components/var).*

## Come funziona [#how-it-works]

* **Corrispondenza dei valori.** Il valore di `branch` viene confrontato con le chiavi delle prop che fornisci. Viene visualizzato il contenuto della prop corrispondente.
* **Fallback.** Se `branch` viene omesso o il suo valore non corrisponde ad alcuna chiave di prop, `children` viene visualizzato come fallback. `<Branch>` non genera mai errori.

## Props [#props]

| Prop                    | Descrizione                                         | Type                          | Facoltativo | Predefinito |
| ----------------------- | --------------------------------------------------- | ----------------------------- | ----------- | ----------- |
| [`branch`](#branch)     | Il valore che seleziona il contenuto.               | `string \| number \| boolean` | Sì          | —           |
| [`children`](#children) | Contenuto di fallback se nessun branch corrisponde. | `ReactNode`                   | Sì          | —           |
| [`[value]`](#value)     | Contenuto per un valore specifico del branch.       | `ReactNode`                   | Sì          | —           |

### `branch` [#branch]

**Type** `string | number | boolean` · **Facoltativo**

Il valore usato per selezionare quale branch visualizzare. Se `branch` viene omesso o il suo valore non corrisponde ad alcuna chiave prop del branch, al suo posto viene visualizzato `children` come fallback.

### `children` [#children]

**Tipo** `ReactNode` · **Facoltativo**

Contenuto di fallback renderizzato quando nessuna prop `branch` corrisponde al valore di `branch`.

### `[value]` [#value]

**Tipo** `ReactNode` · **Facoltativo**

Una prop per ogni possibile valore di `branch`. Ogni chiave corrisponde a un valore di `branch` e il relativo contenuto viene visualizzato quando quel valore corrisponde. Al posto di JSX è accettata anche una stringa.

## Esempi [#examples]

*Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch
      branch={user.hairColor} // [!code highlight]
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // funziona anche una semplice stringa
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch
      branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      {/* [!code highlight] */}
      <p>Their hair is unknown.</p>
    </Branch>
  );
}
```

```tsx title="BranchExample.tsx"
import { T, Branch, Var } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <T>
      <Branch
        branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        {/* [!code highlight] */}
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}
```

## Note [#notes]

* Le chiavi di branch possono essere qualsiasi valore stringa che corrisponda alla prop `branch`, rendendo `<Branch>` adattabile a molti casi d&#39;uso.
* Combina `<Branch>` con [`<T>`](/docs/react/reference/components/t) e i [componenti variabili](/docs/react/guides/formatting-variables) per contenuti dinamici tradotti.
* Per i contenuti basati sul conteggio, usa [`<Plural>`](/docs/react/reference/components/plural).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.