diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 62670150aca..bbc826745b5 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -222,6 +222,32 @@ For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Access +### 4. Don't pass function references as children {/*4-dont-pass-function-references-as-children*/} + +JSX children should be elements, strings, or numbers—not function references. A common mistake is forgetting to call a function when you want to display its result: + +```js +// ❌ This doesn't work - displays [Function] +export default function Button() { + const handleClick = () => alert('Clicked!'); + return ; +} + +// ✅ This works - call the function if you want its result +export default function Greeting() { + const getMessage = () => 'Hello, world!'; + return