# General Translation Knowledge Base: How do I translate conditional text in JSX?
URL: https://generaltranslation.com/en-US/kb/translate-conditional-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Instead of translating each side of a ternary separately, wrap the whole sentence in a `<T>` component and express the condition with `<Branch>`, so the translator sees the full context and can reorder the sentence for each language.
Authors: Ernest McCarter
Published: 2026-10-09

## Introduction

One of the most common mistakes I see in internationalization is the tendency to
split simple ternary statements into multiple translation calls.
It will often look something like this:

```jsx
const gt = useGT()

return (
  <>
    <span>
      <T> Dark Mode: </T>
    </span>
    <Button>{enabled ? gt('On') : gt('Off')}</Button>
  </>
)
```

For the most part, this works as intended. Prior to implementing i18n, the code probably looked something like `{ enabled ? 'On' : 'Off' }`.
Adding the `gt()` function for i18n was probably just a natural extension of the existing code structure.

Every time I see this, I physically cringe a little. This is not at all how the library was designed to be used.
There are two arguments for why this is a mistake, especially in the context of using machine translation: (1) Context and (2) Flexibility.

### Context

Meaning is not only embedded in the words but also in how words are presented.
The word "back", if located on a back arrow, probably means something very different than the word "back" on a chiropractor's resume.
Additionally, without a larger context, translators (even human ones) might have difficulty translating the word correctly.
There's a famous story of WhatsApp's i18n department translating the word "crop" on an image editor tool to "crop" as in farming in German.

To get around this context issue, we can pass information about the presentation of content with the [`<T>`](/docs/react/reference/components/t) and [`<Branch>`](/docs/react/reference/components/branch) components.
In our example, this would give our "translator" a larger picture of what "on" and "off" means.

```jsx
<T>
  <span>Dark Mode:</span>
  <Button>
    <Branch branch={enabled.toString()} true="On" false="Off" />
  </Button>
</T>
```

### Flexibility

Beyond context, another cool way we can leverage LLM translation is through its understanding of code.
Let's look at an example where the order of components might change depending on the language:

```jsx
<T>
  I eat lunch at <Branch branch={atHome.toString()} true="home" false="work" />.
</T>
```

So we have two possible sentences:

- "I eat lunch **at home**"
- "I eat lunch **at work**"

In Mandarin we would have:

- "我**在家**吃午餐"
- "我**在公司**吃午餐"

The [`<T>`](/docs/react/reference/components/t) component recognizes that the sentence order must change here, and it rearranges its children
accordingly—something that is not easily possible while using ternary operators with string translation.

```jsx
<T>
  我在
  <Branch branch={atHome.toString()} true="家" false="公司" />
  吃午餐。
</T>
```

### Conclusion

If you take anything away from this article, you should always be looking for ways to leverage context and flexibility in your code.
Using the [`<Branch />`](/docs/react/reference/components/branch) component is probably one of the easiest ways to do this.

Check out the [`<Branch />` component](/docs/react/reference/components/branch) documentation for more details.

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/kb/sitemap.md) for every article.