# General Translation React SDKs (gt-react, gt-next): Translating JSX
URL: https://generaltranslation.com/en-US/docs/react/guides/translating-jsx.mdx
---

title: Translating JSX
description: How to translate JSX in place with the General Translation <T> component across React, Next.js, TanStack Start, and React Native.
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

The [`<T>`](/docs/react/reference/components/t) component translates its JSX children into the active locale. Write your content in your source language and wrap it — General Translation extracts the text, translates it, and renders the result in place.

The component behaves identically across every framework; only the import package changes.

## Wrap content in `<T>` [#wrap]

Wrap any JSX that contains user-facing text. Nested markup and elements are preserved in the translation.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T } from 'gt-react';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T } from 'gt-next';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```

    *Note: In Next.js, `<T>` works in both server and client components — the same import from `gt-next` resolves to the server or client implementation automatically.*
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T } from 'gt-tanstack-start';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T } from 'gt-react-native';

    <T>
      <Text>Welcome back</Text>
      <Text>Your order is on its way.</Text>
    </T>;
    ```

    *Note: In React Native, wrap native text nodes such as `<Text>` rather than HTML elements.*
  </Tab>
</Tabs>

You do not assign a key or id — General Translation identifies the entry from its content. Keep the content static; use variable components for dynamic values (see [Formatting numbers and dates](/docs/react/guides/formatting-variables)).

## Disambiguate with context [#context]

When the same text can translate differently depending on meaning, add `$context` so translators and the engine can tell entries apart. This works the same in every framework.

```tsx
<T $context="a bank of a river">
  <span>Bank</span>
</T>;
```

## Keep entries stable with an id [#id]

Pass `$id` to give an entry a stable identifier that does not change when you edit surrounding markup. This is optional; use it when you want a fixed reference for an entry.

```tsx
<T $id="home.hero.title">
  <h1>Welcome back</h1>
</T>;
```

*Note: Content inside `<T>` must be static JSX. Move conditional or interpolated values into [`<Var>`](/docs/react/reference/components/var), [`<Plural>`](/docs/react/reference/components/plural), or [`<Branch>`](/docs/react/reference/components/branch) so the surrounding text stays translatable.*

## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries