# gt-react: General Translation React SDK: Branch
URL: https://generaltranslation.com/es/docs/react/api/components/branch.mdx
---
title: Branch
description: Referencia de la API del componente Branch
---

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


## Resumen

El componente `<Branch>` te permite añadir lógica condicional a una traducción.

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>
```

Pasas un valor al parámetro `branch`, y este se hace coincidir con un valor de salida según las claves que proporciones.


## Referencia

### Props

<TypeTable
  type={{
  "branch": {
      description: 'El nombre de la rama que se debe renderizar.',
      type: 'string',
      optional: false,
  },
  "children?": {
      description: 'contenido alternativo',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      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.
Por ejemplo, se pueden añadir como parámetros ramas como `active` e `inactive`.

| Prop            | Descripción                                                                                                                                                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `branch`        | El nombre de la rama que se debe renderizar.                                                                                                               |
| `children`      | contenido alternativo que se renderiza si no se encuentra ninguna rama que coincida.                                                                       |
| `[key]: string` | Ramas que representan posibles contenidos para el valor de rama dado. Cada clave corresponde a una rama y su valor es el contenido que se debe renderizar. |

### Devuelve

`JSX.Element` que contiene el contenido correspondiente a la rama especificada o el contenido alternativo.

### Lanza

`Error` si no se proporciona la prop `branch` o si no es válida.

## Ejemplos

### Uso básico

`<Branch>` debe tener una salida diferente para cada valor posible de la prop `branch`.

En este ejemplo, el valor `user.hairColor` se usa para determinar la salida.
Hemos definido las props `black`, `brown` y `blonde` para que coincidan con los posibles valores de `user.hairColor`.

```jsx title="BranchExample.jsx" copy
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." // (puedes pasar una cadena si lo prefieres)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### Contenido alternativo

La prop `children` siempre se usará como contenido alternativo si ninguna prop coincide con el valor que se pasa a `branch`.

```jsx title="BranchExample.jsx" copy
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]
    </Branch>
  );
}
```


### Traducir Branch

Si quieres traducir el contenido, envuélvelo en el componente `<T>`.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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>
      </Branch>
    </T> // [!code highlight]
  );
}
```


### Añadir variables

Si quieres renderizar valores dinámicos en la rama, asegúrate de envolverlos en los componentes `<Currency>`, `<DateTime>`, `<Num>` o `<Var>`.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <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

* Las claves de las ramas pueden ser cualquier cadena que coincida con la prop `branch`. Esta flexibilidad facilita adaptar `<Branch>` a una amplia variedad de casos de uso.
* Combina `<Branch>` con otros componentes, como `<T>` para traducciones y [componentes de variable](/docs/react/guides/variables) para contenido dinámico, para crear interfaces más completas y localizadas.

## Siguientes pasos

* Para ver usos y ejemplos más avanzados, consulta [Uso de componentes de bifurcación](/docs/react/guides/branches).