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!
Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x