Bug: Improve error message when function is passed as JSX child

[elkanatum]

Summary

When developers accidentally pass a function as a JSX child (a common mistake for React beginners), the current error message is technically correct but not helpful for debugging and doesn't suggest the most common solution.

React version

19.x (current stable)

Steps To Reproduce

1. Create a React component that renders a function directly as a child:

function App() {
  const handleClick = () => console.log('clicked');
  return <div>{handleClick}</div>; // Missing parentheses - should be {handleClick()}
}

2. Run the component
3. Observe the error message in the console

Current Behavior
The error message shows:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.
Expected Behavior
The error message should provide more specific guidance for the most common scenarios:
Warning: Functions are not valid as a React child. This may happen if:
- You forgot to call the function: use {functionName()} instead of {functionName}
- You meant to render a component: use <ComponentName /> instead of {ComponentName}
- You intended to pass the function as a prop to a child component
Link to code example
A simple reproduction case can be created by rendering any function directly as JSX content without calling it.
Additional Context
This error is frequently encountered by React beginners, and the current message doesn't point toward the most common solution (missing parentheses when calling a function). This enhancement would improve the developer experience for new React developers by providing actionable suggestions.
Error message improvements align with React's commitment to developer experience, similar to other recent error message enhancements in the codebase.