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

Question

I have written a Higher Order Component:

import React from 'react';   const NewHOC = (PassedComponent) => {     return class extends React.Component {         render(){             return (                 <div>                     <PassedComponent {...this.props}/>                 </div>             )         }     } }  export default NewHOC; 

I am using the above in my App.js:

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 (     <div>      Hello From React!!      <NewHOC>         <Movie name="Blade Runner"></Movie>      </NewHOC>     </div>    );   }  } 

But, the warning I am getting is:

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

The Movie.js file is:

import React from "react";  export default class Movie extends React.Component{     render() {         return <div>             Hello from Movie {this.props.name}             {this.props.children}</div>     } } 

What am I doing wrong?

Answer 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"/>

So basically NewHOC is just a function that accepts a component and returns a new component that renders the component passed in. We usually use this pattern to enhance components and share logic or data.

You can read about HOCS in the docs and I also recommend reading about the difference between react elements and components

I wrote an article about the different ways and patterns of sharing logic in react.