🎄 Get 50% off from our JavaScript course for the holidays! 🎄

How to Fix "Functions are not valid as React child" Errors

How to fix common React errors

Ferenc Almasi • 2022 July 25 • 📖 2 min read

The "Functions are not valid as React child" error happens in React, whenever you try to return a function from your component, instead of calling the function. It may also happen if you return the reference to a component instead of calling it as a JSX tag.

const fn = () => { ... }
const Component = () => { ... }

// 🔴 This will throw the above error
const App = () => {
    return fn
}

// 🟢 Call the executed function instead
const App = () => {
    return fn()
}

// 🔴 This will throw the above error
const App = () => {
    return Component
}

// 🟢 Call it as a component
const App = () => {
    return <Component />
}
Copied to clipboard!

This happens because you return a reference to the function, instead of returning the return value of the function, which you can do by invoking it.

In the second example, we try to render a component, but we return the function instead. In this case, make sure you return it as a JSX tag, instead of referencing the function.

You may also come across the same issue when using React Router. The Route component expects a component to be rendered for the element prop. Make sure you pass a component for the prop, instead of passing a reference to the component.

// 🔴 This will throw the above error
<Route path="/" element={Component} />

// 🟢 Pass the component instead
<Route path="/" element={<Component />} />
Copied to clipboard!
Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

🎉 Thank you for subscribing to our newsletter. x