# General Translation React SDKs (gt-react, gt-next): Branch
URL: https://generaltranslation.com/es/docs/react/reference/components/branch.mdx
---

title: Branch
description: Renderiza contenido de forma condicional en función de un valor con General Translation gt-react. Referencia de la API de Branch.

---

El componente `<Branch>` añade lógica condicional a una traducción. Le pasas un valor a `branch` y renderiza la prop `child` correspondiente.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

## Resumen general [#overview]

Proporciona un valor para `branch` y una prop `child` para cada valor posible.

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

*Nota: coloca `<Branch>` dentro de un [`<T>`](/docs/react/reference/components/t) para traducir los casos, y envuelve los valores dinámicos que contengan en un componente de variable como [`<Var>`](/docs/react/reference/components/var).*

## Cómo funciona [#how-it-works]

* **Coincidencia de valores.** El valor de `branch` se compara con las claves de las props que proporcionas. Se renderiza el contenido de la prop coincidente.
* **Contenido alternativo.** Cuando se omite `branch` o su valor no coincide con ninguna clave de las props, `children` se renderiza como contenido alternativo. `<Branch>` nunca lanza errores.

## Props [#props]

| Prop                    | Descripción                                              | Type                          | Opcional | Predeterminado |
| ----------------------- | -------------------------------------------------------- | ----------------------------- | -------- | -------------- |
| [`branch`](#branch)     | El valor que selecciona el contenido.                    | `string \| number \| boolean` | Sí       | —              |
| [`children`](#children) | Contenido alternativo cuando no coincide ninguna branch. | `ReactNode`                   | Sí       | —              |
| [`[value]`](#value)     | Contenido para un valor específico de branch.            | `ReactNode`                   | Sí       | —              |

### `branch` [#branch]

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

El valor que se usa para seleccionar qué branch se renderiza. Cuando se omite `branch` o su valor no coincide con ninguna clave de prop de branch, `children` se renderiza como contenido alternativo.

### `children` [#children]

**Tipo** `ReactNode` · **Opcional**

Contenido alternativo que se renderiza cuando ninguna prop `branch` coincide con el valor de `branch`.

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

**Tipo** `ReactNode` · **Opcional**

Una prop por cada valor posible de `branch`. Cada clave corresponde a un valor de `branch`, y su contenido se muestra cuando coincide con ese valor. Se acepta una cadena en lugar de JSX.

## Ejemplos [#examples]

```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." // una cadena de texto simple también funciona
      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>}
    >
      <p>Their hair is unknown.</p> // [!code highlight] contenido alternativo
    </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>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}
```

## Notas [#notes]

* Las claves de branch pueden ser cualquier valor de cadena que coincida con la prop `branch`, lo que hace que `<Branch>` se adapte a muchos casos de uso.
* Combina `<Branch>` con [`<T>`](/docs/react/reference/components/t) y [componentes variables](/docs/react/guides/formatting-variables) para contenido traducido y dinámico.
* Para contenido basado en cantidades, usa [`<Plural>`](/docs/react/reference/components/plural).