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

by

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.

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. Call child method from parent
  3. Window is not defined in Next.js React app
  4. How to maintain state after a page refresh in React.js?
  5. Simple Component is not rendering: React js
  6. Console.log() after setState() doesn’t return the updated state
  7. React JS – Uncaught TypeError: this.props.data.map is not a function
  8. Pass react component as props
  9. How to register event with useEffect hooks?
  10. Where should ajax request be made in Flux app?
  11. Understanding React-Redux and mapStateToProps()
  12. React.js: Identifying different inputs with one onChange handler
  13. Support for the experimental syntax ‘jsx’ isn’t currently enabled
  14. Is there a way to use leaflet.heat in react?
  15. How to update the Context value in a Provider from the Consumer?
  16. Determine which dependency array variable caused useEffect hook to fire
  17. What does “export default” do in JSX?
  18. Axios – DELETE Request With Request Body and Headers?
  19. Updating state to the same state directly in the component body
  20. reactjs and masonry layout – undefined
  21. Jest – SyntaxError: Cannot use import statement outside a module
  22. Does strict mode work differently with React 18?
  23. Bootstrap modal in React.js
  24. TypeError dispatcher.useState is not a function when using React Hooks
  25. UseEffect being called multiple times
  26. How to Access styles from React?
  27. Is it possible to pass context into a component instantiated with ReactDOM.render?
  28. Firebase-Admin, importing it to react application throws Module not found error
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. How to dynamically import SVG and render it inline

Leave a Comment