# General Translation Knowledge Base: How do I translate conditional text in JSX? URL: https://generaltranslation.com/en-GB/kb/translate-conditional-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: Rather than translating each side of a ternary separately, wrap the whole sentence in a `` component and express the condition with ``, so that the translator sees the full context and can reorder the sentence for each language. Category: Internationalisation Last updated: 2025-09-26 Authors: Ernest McCarter Published: 2025-09-26 ## Video The video is narrated in English, with English captions. [How do I translate conditional text in JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-conditional-jsx.mp4) (46 secs) General Translation lets you wrap whole sentences in `T` and express conditions with `Branch`. Run `npx gt init`, choose Japanese and Chinese and sign in, put the sentence in a `T` component with a `Branch` so the translator sees it whole, then run `npx gt translate` to write Japanese and Chinese with the place before the verb. ## Introduction One of the most common mistakes I see in internationalisation 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 ( <> Dark Mode: ) } ``` For the most part, this works as intended. Before 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 reasons why this is a mistake, especially in the context of machine translation: (1) Context and (2) Flexibility. ### Context Meaning is embedded not only in the words but also in how the words are presented. The word "back", if located on a back arrow, probably means something very different from the word "back" on a chiropractor's CV. Additionally, without wider context, translators (even human ones) might struggle to translate the word correctly. There's a famous story of WhatsApp's i18n department translating the word "crop" in an image editing tool into German as "crop" in the farming sense. To get around this context issue, we can pass information about the presentation of content with the [``](/docs/react/reference/components/t) and [``](/docs/react/reference/components/branch) components. In our example, this would give our "translator" a fuller picture of what "on" and "off" mean. ```jsx Dark Mode: ``` ### Flexibility Beyond context, another neat 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 I eat lunch at . ``` So we have two possible sentences: * "I eat lunch **at home**" * "I eat lunch **at work**" In Mandarin we would have: * "我**在家**吃午餐" * "我**在公司**吃午餐" The [``](/docs/react/reference/components/t) component recognises that the word order must change here, and it rearranges its children accordingly—something that is not easily achieved when using ternary operators with string translation. ```jsx 我在 吃午餐。 ``` ### Conclusion If you take one thing away from this article, it should be that you should always be looking for ways to make use of context and flexibility in your code. Using the [``](/docs/react/reference/components/branch) component is probably one of the easiest ways to do this. Have a look at the [`` component](/docs/react/reference/components/branch) documentation for more details. ## Related questions - [How do I handle plurals in React?](https://generaltranslation.com/en-GB/kb/how-to-handle-plurals-in-react.mdx): Don't hard-code plural logic with checks such as 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 `` from gt-react or gt-next handles for every language. - [Can I do i18n without translation files?](https://generaltranslation.com/en-GB/kb/i18n-without-translation-files.mdx): Yes. With gt-react or gt-next, content stays inline in your components inside a `` 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-GB/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-GB/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-GB/kb/multilingual-nextjs-seo.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/en-GB/kb/sitemap.md) for every article.