This error occurs when you accidentally pass a function reference instead of calling it or rendering a component. React expects child elements to be renderable JSX elements, not function references.
React treats JSX children as elements that should be renderable components, JSX elements, or valid React data types like strings, numbers, and arrays. When you pass a function reference directly, React doesn't know how to render it and throws this error. This typically happens in two scenarios: (1) you're returning a function reference instead of calling it with parentheses, or (2) you're using a component name without the JSX angle brackets.
Look for curly braces in your JSX that contain a function name without parentheses.
Wrong:
<div>{renderContent}</div>Correct:
<div>{renderContent()}</div>Add parentheses () to call the function and return its JSX result.
When rendering a component, always use angle brackets to create a JSX element.
Wrong:
<div>{MyComponent}</div>Correct:
<div><MyComponent /></div>This tells React to instantiate the component and render it, rather than passing the function itself.
In React Router v6, the element prop requires a JSX element, not a component reference.
Wrong:
<Route path="/about" element={About} />Correct:
<Route path="/about" element={<About />} />Wrap your component in JSX syntax to create an element.
If you're rendering components dynamically, ensure you're using JSX syntax:
Wrong:
const components = { Button: MyButton };
return <div>{components.Button}</div>;Correct:
const Component = components.Button;
return <div><Component /></div>;Assign the component to a variable, then use it with angle brackets.
Render Props Pattern: If you intentionally want to pass a function as children (a valid advanced pattern), use the render props or function-as-children pattern. In this case, you call the function inside your component: this.props.children(data) instead of rendering it directly.
Function vs Component: Remember that in React, a component is a function that returns JSX. The difference is in how you use it: myFunction is a function reference, myFunction() executes it, and <MyFunction /> is JSX that React uses to create an instance of the component.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React