From bce41568f1a1f99be02bde7701c1916aac4e4303 Mon Sep 17 00:00:00 2001 From: Kanika Date: Tue, 20 Jan 2026 22:28:32 +0530 Subject: [PATCH] Clarify that JSX braces require expressions Explain that JSX curly braces expect expressions, not statements, and show how to use if before return vs expression forms inline. Fixes #8247 --- src/content/learn/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 15e3b28663c..17b1dbb348a 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -197,6 +197,8 @@ return ( ); ``` +JSX curly braces expect **expressions**, not statements. This is why `if` runs in regular JavaScript *before* the returned JSX, while the result of that `if` (like `content`) is placed inside `{ }`. When you need to branch inline inside JSX, use an expression form such as the conditional (`? :`) operator. + If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX: ```js