Error AtlasError Documentation and Resolution
Back to searchMore React errors

React

Functions are not valid as a child of Client Components

Functions are not valid as a child of Client Components.

React received a function where rendered output was expected inside a Client Component, often because a component reference or callback was returned instead of JSX.

React error #506runtime

Observed message

Functions are not valid as a child of Client Components.

Why it happens

  • A function was returned from render instead of a rendered element.
  • A component reference was used where an instantiated component like <Component /> was intended.
  • A callback or helper function leaked into rendered output.

How to fix it

  1. Render a JSX element such as <Component /> instead of returning Component.
  2. Call the intended function if you meant to use its result rather than the function itself.
  3. Check the render path for accidental function values in arrays, fragments, or conditional branches.

Official reference

React Docs: Minified React error #506

Related errors

React error #482A Client Component was marked asyncReact warningA component is changing an uncontrolled input to be controlledReact error #109A valid React element or null must be returnedReact error #185Can't perform a React state update on an unmounted component

Explore more

ReactBrowse more React errorsruntimeBrowse more runtime errors
React error #506 functions are not valid as a child of Client Components | Error Atlas