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

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(){
    
      
    
  }
}

Parent 2

export default class Parent2 extends React.Component{
  render(){
    const { componentToFormik } = this.props
    return(
     {
        return(
          
            {(new componentToFormik(formikProps)).render()}
          
        )
      }}
    />
    )
  }
}