close

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

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve 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 Solve Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render Error?

    To Solve Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render Error Here In my case, I forgot to add the () after the function name inside the render function of a react component. Changing the render method, as it states in the error message to fixed the problem

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

    To Solve Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render Error Here In my case, I forgot to add the () after the function name inside the render function of a react component. Changing the render method, as it states in the error message to fixed the problem

Solution 1

You are using it as a regular component, but it’s actually a function that returns a component. Try doing something like this:

const NewComponent = NewHOC(Movie)

And you will use it like this:

<NewComponent someProp="someValue" />

Here is a running example:

const NewHOC = (PassedComponent) => {
  return class extends React.Component {
    render() {
      return (
        <div>
          <PassedComponent {...this.props} />
        </div>
      )
    }
  }
}

const Movie = ({name}) => <div>{name}</div>

const NewComponent = NewHOC(Movie);

function App() {
  return (
    <div>
      <NewComponent name="Kill Bill" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

Solution 2

Here In my case, I forgot to add the () after the function name inside the render function of a react component

public render() {
       let ctrl = (
           <>
                <div className="aaa">
                    {this.renderView}
                </div>
            </>
       ); 

       return ctrl;
    };


    private renderView() : JSX.Element {
        // some html
    };

Changing the render method, as it states in the error message to

        <div className="aaa">
            {this.renderView()}
        </div>

fixed the problem

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment