[Solved] Functions are not valid as a React child. This may happen if you return a Component instead of Component from render

I am trying to Use Router But I am facing the following error: Functions are not valid as a React child. This may happen if you return a Component instead of Component from render in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

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

I am trying to Use Router But I am facing the following error.

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in NewHOC (created by App) in div (created by App) in App

Here is my code.

<Route path="/blog" exact element={ AllBlogList } />

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render Error?

Solution 1: Use Component Like <Component/>

Your Route element sytanx is incorrect it should be { <AllBlogList/> } Just Correct it Like this.

<Route path="/blog" exact element={ <AllBlogList/> } />

Ane now, Your error must be solved.

Solution 2: Call Function

If You are working with functions then Don’t use the function directly it will give you the above error. You need to call that function and then you can use it.

const App = () => {
  const getList = () => {
    return <ul>
     <li key={1}>Coffee</li>
     <li key={2}>Tea</li>
     <li key={3}>Milk</li>
  </ul>;
 };

  return <div>{getList()}</div>; // This is Correct
};

export default App;

Or You Can Use Just Like This.

const App = () => {
  const getList = () => {
    return <ul>
     <li key={1}>Coffee</li>
     <li key={2}>Tea</li>
     <li key={3}>Milk</li>
  </ul>;
 };

  return (<div> <getList /> </div>); // This is Correct
};

export default App;

Now, Your error must be solved.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• How to upgrade react to the latest version?
• Objects are not valid as a React child
• The useState set method not reflecting a change immediately
• The above error occurred in the component
• Argument type ‘unknown’ is not assignable parameter of type