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 {
          


        

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:

Here is a running example:

const NewHOC = (PassedComponent) => {
  return class extends React.Component {
    render() {
      return (
        

          
        
      )
    }
  }
}

const Movie = ({name}) => 
{name}

const NewComponent = NewHOC(Movie);

function App() {
  return (
    

      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

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.