Functions not valid as child ⚛️ React

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.

A function (usually a component itself) was rendered instead of calling/rendering it as an element.

Seen on: React

Meaning

Writing {Header} instead of <Header />, or returning a component function rather than JSX.

Common causes

  • {MyComponent} instead of <MyComponent />
  • Passing a render function without calling it
  • Returning a component type from render

⚡ Quick fix

  1. Render as an element: <Header />
  2. Call render props: {renderItem(item)}

Detailed fix by platform

React

  1. {showHeader && <Header />}

How to diagnose

  1. Expression — Which {…} renders a function?
  2. Recent change — Did it start after a deploy, upgrade, or configuration change? Compare with the last working version.

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.