From 0af932a31361b6d1e572c0123358b28d4200e7a3 Mon Sep 17 00:00:00 2001
From: Elkana Tum <tume@oregonstate.edu>
Date: Fri, 8 Aug 2025 16:11:28 -0700
Subject: [PATCH] docs: add JSX rule about function references as children

Adds documentation explaining the common mistake of passing
function references as JSX children instead of calling them.
Includes examples showing incorrect and correct usage.

Addresses facebook/react#34007
---
 src/content/learn/writing-markup-with-jsx.md | 28 +++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

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
 
 </Pitfall>
 
+### 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 <button>{handleClick}</button>;
+}
+
+// ✅ This works - call the function if you want its result
+export default function Greeting() {
+  const getMessage = () => 'Hello, world!';
+  return <div>{getMessage()}</div>;
+}
+
+// ✅ Or pass it as a prop for event handling
+export default function Button() {
+  const handleClick = () => alert('Clicked!');
+  return <button onClick={handleClick}>Click me</button>;
+}
+```
+
+If you accidentally pass a function reference as a child, React will display it as `[Function]` instead of rendering meaningful content.
+
 ### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
 
 Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
@@ -350,4 +376,4 @@ export default function Bio() {
 
 </Solution>
 
-</Challenges>
+</Challenges>
\ No newline at end of file