close
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render, How to solve Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render, Functions are not valid as a React child. This may happen if you return a Component instead of from render Reactjs Functions are not valid as a React child. This may happen if you return a Component instead of from render, Functions are not valid as a React child. This may happen if you return a Component instead of from render in Reactjs

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

by

Today We are Going To Solve Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render in reactjs. Here we will Discuss All Possible Solutions and How this error Occurs So let’s get started with this Article.

How to Fix Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render Error?

  1. How to Fix Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render Error?

    To Fix Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render Error just Use correct syntax. The reason behind this error is sometimes you are using the incorrect syntax of the routing. So here I am giving you the correct syntax of routing. Just use this syntax and you will solve your error. So use this: <Route path="/movies/list" exact element={ <MoviesList/> } />

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

    To Fix Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render Error just Don't call a function from jsx.
    This error occurs due to the reason when you call a function from jsx directly rather than in an event. So just make sure about of it to remove the error and write the code like given below code: <h1 onClick={this.myFunc}>Hit Me</h1>

Solution 1 : Use correct syntax

The reason behind this error is sometimes you are using the incorrect syntax of the routing. So here I am giving you the correct syntax of routing. Just use this syntax and you will solve your error. So use this:

<Route path="/movies/list" exact element={ <MoviesList/> } />

Solution 2 : Don’t call a function from jsx

This error occurs due to the reason when you call a function from jsx directly rather than in an event. So just make sure about of it to remove the error and write the code like given below code:

<h1 onClick={this.myFunc}>Hit Me</h1>

Solution 3 : Use NewHOC

First of all we will use NewHOC. This is just a function that accepts a component and returns a new component which will renders the component passed in. So here we will use this. So first of all use this as given below: 

const NewComponent = NewHOC(Movie)

And then use this. It will solve your error.

<NewComponent someProp="someValue" />

Conclusion

So these were all possible solutions to this error. I hope your error has been solved by this article. In the comments, tell us which solution worked? If you liked our article, please share it on your social media and comment on your suggestions. Thank you.

Also Read This Solutions

Leave a Comment