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    gt        return class extends React Component           render                return                    lt div gt                       lt PassedComponent     this props   gt                   lt  div gt                                   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        lt div gt       Hello From React         lt NewHOC gt           lt Movie name  Blade Runner  gt  lt  Movie gt        lt  NewHOC gt       lt  div gt                 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  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   The Movie js file is   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            What am I doing wrong

User · Answer

Adding to sagiv s answer  we should create the parent component in such a way that it can consist all children components rather than returning the child components in the way you were trying to return   Try to intentiate the parent component and pass the props inside it so that all children can use it like below  const NewComponent   NewHOC Movie     Here NewHOC is the parent component and all its child are going to use movie as props    But any way  you guyd6 have solved a problem for new react developers as this might be a problem that can come too and here is where they can find the solution for that

User · Answer

In my case  I was transport class component from parent and use it inside as a prop var  using typescript and Formik  and run well like this   Parent 1  import Parent2 from       components Parent2 parent2  import Parent3 from       components Parent3 parent3   export default class Parent1 extends React Component     render         lt React Fragment gt         lt Parent2 componentToFormik  Parent3    gt       lt  React Fragment gt          Parent 2  export default class Parent2 extends React Component    render        const   componentToFormik     this props     return       lt Formik        render   formikProps    gt            return             lt React fragment gt                new componentToFormik formikProps   render               lt  React fragment gt                           gt

User · Answer

What would be wrong with doing     lt div className    key  index  gt      i title   lt  div gt      Use IIFE        function           if  child children  amp  amp  child children length     0         let menu   createMenu child children        console log  nested menu   menu        return menu

User · Answer

I was able to resolve this by using my calling my high order component before exporting the class component  My problem was specifically using react-i18next and its withTranslation method  but here was the solution    export default withTranslation   Header     And then I was able to call the class Component as originally I had hoped    lt Header someProp  someValue    gt

User · Answer

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   lt NewComponent someProp  quot someValue quot    gt   Here is a running example   x000D   x000D  const NewHOC    PassedComponent    gt      return class extends React Component       render           return            lt div gt             lt PassedComponent     this props    gt           lt  div gt                       const Movie     name     gt   lt div gt  name  lt  div gt   const NewComponent   NewHOC Movie    function App       return        lt div gt         lt NewComponent name  Kill Bill    gt       lt  div gt          const rootElement   document getElementById  root    ReactDOM render  lt App   gt   rootElement   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt   lt div id  root   gt  x000D   x000D   x000D   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

User · Answer

I was getting this from webpack lazy loading like this  import Loader from  some-loader-component   const WishlistPageComponent   loadable      gt  import    webpackChunkName   WishlistPage        components WishlistView WishlistPage        fallback  Loader     warning     render         return  lt WishlistPageComponent   gt          changed to this then it s suddenly fine const WishlistPageComponent   loadable      gt  import    webpackChunkName   WishlistPage        components WishlistView WishlistPage        fallback         all good

User · Answer

it also happens when you call a function from jsx directly rather than in an event  like   it will show the error if you write like    lt h1 gt  this myFunc  lt h2 gt    it will go if you write    lt h1 onClick  this myFunc  gt Hit Me lt  h1 gt

User · Answer

In my case i forgot to add the    after the function name inside the render function of a react component  public render            let ctrl                 lt  gt                   lt div className  aaa  gt                       this renderView                   lt  div gt               lt   gt                     return ctrl               private renderView     JSX Element              some html          Changing the render method  as it states in the error message to           lt div className  aaa  gt               this renderView             lt  div gt    fixed the problem

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

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components