This error occurs when you pass a function reference to JSX instead of calling it or rendering it as a component. React expects renderable values (elements, strings, numbers), not function objects.
This error appears when React encounters a function object in the component tree where it expects a valid React child. React children must be elements, strings, numbers, or fragments—not function references. The most common cause is returning a component function reference instead of invoking it with JSX syntax. For example, passing `MyComponent` instead of `<MyComponent />`, or returning `getButton` instead of `getButton()`. React's reconciliation process cannot render function objects directly. It needs either JSX elements created by components, or primitive values it can display. When it encounters a function, it throws this error to prevent silent failures and undefined behavior.
Look at the error stack trace to find the component causing the issue. The error will typically point to the exact line where a function reference is being used.
Check your JSX for any of these patterns:
// ❌ Function reference - causes error
return <div>{getButton}</div>;
return <div>{MyComponent}</div>;
return <Route path="/about" element={About} />;
// ✅ Proper invocation
return <div>{getButton()}</div>;
return <div><MyComponent /></div>;
return <Route path="/about" element={<About />} />;Use your IDE's "Go to definition" feature on the problematic reference to confirm it's a function.
If you have a helper function that returns JSX, you must invoke it with parentheses:
function MyComponent() {
const renderButton = () => {
return <button>Click me</button>;
};
// ❌ Wrong - passes function reference
return <div>{renderButton}</div>;
// ✅ Correct - calls function
return <div>{renderButton()}</div>;
}The function is called during render, and its return value (JSX) becomes the child.
If the function is a React component, use JSX brackets (< />) to render it:
// Define component
const Button = () => <button>Click me</button>;
function App() {
// ❌ Wrong - component reference
return <div>{Button}</div>;
// ✅ Correct - component rendered as JSX
return <div><Button /></div>;
}React components must be rendered with JSX syntax to register hooks and lifecycle properly.
In React Router v6, the element prop must receive JSX, not a component reference:
import { Routes, Route } from 'react-router-dom';
const About = () => <div>About Page</div>;
const Home = () => <div>Home Page</div>;
function App() {
return (
<Routes>
{/* ❌ Wrong - component reference */}
<Route path="/" element={Home} />
<Route path="/about" element={About} />
{/* ✅ Correct - JSX elements */}
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}This is a common mistake when migrating from React Router v5 to v6.
Ensure mapped items and conditional expressions return JSX, not function references:
const items = ['Apple', 'Banana', 'Cherry'];
function List() {
// ❌ Wrong - returns function references
const badRender = items.map(Item);
const badConditional = condition ? MyComponent : null;
// ✅ Correct - returns JSX elements
const goodRender = items.map((item, i) => (
<div key={i}>{item}</div>
));
const goodConditional = condition ? <MyComponent /> : null;
return <ul>{goodRender}</ul>;
}Always use arrow functions or explicit JSX when mapping over arrays.
Component vs Function Calls: While both <Component /> and Component() can work syntactically, they behave very differently. Using JSX (<Component />) allows React to:
- Track component instances across re-renders
- Register and track hooks properly
- Apply React DevTools inspection
- Manage component lifecycle and state
Calling components as functions (Component()) bypasses React's component system, causing hook errors like "Rendered fewer hooks than expected."
TypeScript Considerations: In TypeScript, the return type JSX.Element vs React.ReactNode can affect what's valid to return. Functions returning JSX.Element must return a single element, not null or arrays. Use React.ReactNode for more flexible return types, or wrap multiple elements in a fragment (<>...</>).
ESLint Rules: Enable react/jsx-no-undef and react/jsx-uses-react to catch undefined component references. The react/display-name rule can help identify anonymous functions that should be named components.
Development vs Production: This error may appear more prominently in development builds due to additional React checks. Production builds might fail silently or show different error messages. Always test both builds during development.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite