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

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


## Descripción general

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

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>El usuario está activo.</p>}
    inactive={<p>El usuario está inactivo.</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 renderiza.',
      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 agregar ramas como `active` e `inactive` como parámetros.

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

### Devuelve

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

### Lanza

`Error` si no se proporciona la propiedad `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, se usa el valor de `user.hairColor` para determinar la salida.
Hemos definido las props `black`, `brown` y `blonde` para que se correspondan con los valores posibles 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

Los `children` siempre se usarán como alternativa si ninguna prop coincide con el valor pasado 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 un 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 mostrar 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 valor de 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 ricas y localizadas.

## Próximos pasos

* Para conocer usos y ejemplos más avanzados, consulta [Uso de componentes con bifurcaciones](/docs/react/guides/branches).