title: Functions are not valid as a React child. This may happen if you return a Component instead of from render
body: <p>I have written a Higher Order Component:</p>
  
  <pre><code>import React from 'react';
  
  
  const NewHOC = (PassedComponent) =&gt; {
      return class extends React.Component {
          render(){
              return (
                  &lt;div&gt;
                      &lt;PassedComponent {...this.props}/&gt;
                  &lt;/div&gt;
              )
          }
      }
  }
  
  export default NewHOC;
  </code></pre>
  
  <p>I am using the above in my App.js:</p>
  
  <pre><code>import React from 'react';
  import Movie from './movie/Movie';
  import MyHOC from './hoc/MyHOC';
  import NewHOC from './hoc/NewHOC';
  export default class App extends React.Component {
    render() {
     return (
      &lt;div&gt;
       Hello From React!!
       &lt;NewHOC&gt;
          &lt;Movie name="Blade Runner"&gt;&lt;/Movie&gt;
       &lt;/NewHOC&gt;
      &lt;/div&gt;
     );
    }
   }
  </code></pre>
  
  <p>But, the warning I am getting is:</p>
  
  <blockquote>
    <p>Warning: Functions are not valid as a React child. This may happen if
    you return a Component instead of &lt;Component /&gt; 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</p>
  </blockquote>
  
  <p>The Movie.js file is:</p>
  
  <pre><code>import React from "react";
  
  export default class Movie extends React.Component{
      render() {
          return &lt;div&gt;
              Hello from Movie {this.props.name}
              {this.props.children}&lt;/div&gt;
      }
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>