# 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.
Category: Internationalization
Authors: Ernest McCarter
Published: 2025-09-26

## 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
'use client'

import { T, useGT } from 'gt-react'

export default function ThemeSetting({ enabled }) {
  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.

## Related questions

- [How do I handle plurals in React?](https://generaltranslation.com/en-US/kb/how-to-handle-plurals-in-react.mdx): Don't hard-code plural logic with checks like n === 1. A small helper is enough for English-only apps, but multilingual apps need locale-aware plural rules, which an i18n component such as `<Plural>` from gt-react or gt-next handles for every language.
- [Can I do i18n without translation files?](https://generaltranslation.com/en-US/kb/i18n-without-translation-files.mdx): Yes. With gt-react or gt-next, content stays inline in your components inside a `<T>` component, and translations are generated at build time as output, so there are no keys or per-locale JSON files to write and keep in sync.
- [What should I check before launching a multilingual app?](https://generaltranslation.com/en-US/kb/multilingual-app-launch-checklist.mdx): Before launching a multilingual app, test nine things in every supported locale: complete user journeys including errors, language detection and switching, variables and plurals, currency and time zones, text expansion, right-to-left layout, accessibility, production translation delivery, and crawlable language URLs for SEO. Each check needs an explicit pass condition.

## Previous and next questions

- Previous question: [How do I handle plurals in React?](https://generaltranslation.com/en-US/kb/how-to-handle-plurals-in-react.mdx)
- Next question: [How do I set up SEO for a multilingual Next.js app?](https://generaltranslation.com/en-US/kb/multilingual-nextjs-seo.mdx)

## Sitemap

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