# react-native: Var
URL: https://generaltranslation.com/es/docs/react-native/api/components/var.mdx
---
title: Var
description: Referencia de la API del componente Var
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la template en content/docs-templates/. */}


## Descripción general

El componente `<Var>` se usa para renderizar contenido que no debe traducirse.
Esto resulta útil para renderizar variables, fragmentos de código u otro tipo de contenido que no deba traducirse.
Además, también sirve para renderizar contenido que debe mantenerse privado, como claves de API o información personal.

```jsx
<Var>{user.name}</Var>
```

El componente `<Var>` siempre se usa dentro de un componente `<T>`.
Piensa en él como un componente genérico para valores dinámicos que no encajan en la categoría de `<Currency>`, `<DateTime>` o `<Num>`.


## Referencia

### Propiedades

<TypeTable
  type={{
      "children?": {
          type: 'JSX.Element',
          optional: true,
          default: 'undefined',
      },
      "name?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
      "value?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
  }}
/>

### Descripción

| Prop       | Descripción                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se renderiza dentro del componente. Si se proporciona, tendrá prioridad sobre `value`. |
| `value`    | Valor predeterminado opcional que se mostrará si no se proporciona `children`. Puede ser una cadena.    |

### Devuelve

`JSX.Element` que contiene el contenido que no se debe traducir.

***

## Ejemplos

### Ejemplo básico

El componente `<Var>` debe usarse dentro de un componente `<T>`.

```jsx title="Address.jsx" copy
import { T, Var } from 'gt-react-native'

export default function Example(user) {
  return (
    <T>
      Translate this text!
      Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

***


## Notas

* Los Componentes de variable son esenciales para conservar el contenido dinámico no traducible en las traducciones.
* Usa siempre los Componentes de variable dentro de un componente `<T>`.
* Componentes como `<Num>`, `<Currency>` y `<DateTime>` proporcionan funciones de localización para garantizar un formato preciso.

## Próximos pasos

* Para obtener una explicación más detallada y ejemplos de uso del componente `<Var>` y otros componentes de variable, como `<Currency>`, `<DateTime>` y `<Num>`, consulta la documentación [Uso de componentes de variable](/docs/react-native/guides/variables).