I'm writing an HOC in Reactjs. When I'm going to return class in WithErrorHandler HOC I get a warning in console said

"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." However, if I remove class, warning will be gone.

I am going to add click handler for Modal to enable it to close. Also, I am going to get message from error which I have passed as an argument of second function for show in Modal.

import React, { Component } from 'react';
import Modal from '../Modal'

const WithErrorHandler = WrappedComponent => ({ error, children }) => {

return(

  class extends Component {
state = {modalShow: false}   
modalToggle = ()=> {
this.setState(ModalShow: !!error.message)}
    render() {
      return (
        <WrappedComponent>
          {error && <Modal type={error.messageType} message={error.message} />}
          {children}
        </WrappedComponent>
      );
      }
    }

)  
};

const DivWithErrorHandling = WithErrorHandler(({children}) => {
  return children
})

class App extends Component {
    state ={error: null}
    someMethode = ()=> {
      const sampleError = {//an object with message key}
      this.setState(error: sampleError)
    }
    Render(){
        return (
          <DivWithErrorHandling error={this.state.error} >
            <h1>Component</h1>
            <button onClick={this.someMethode}>
               Toggle Error
            </button>
          </DivWithErrorHandling>

        )
    }

}

I'm writing an HOC in Reactjs. When I'm going to return class in WithErrorHandler HOC I get a warning in console said

"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." However, if I remove class, warning will be gone.

I am going to add click handler for Modal to enable it to close. Also, I am going to get message from error which I have passed as an argument of second function for show in Modal.

import React, { Component } from 'react';
import Modal from '../Modal'

const WithErrorHandler = WrappedComponent => ({ error, children }) => {

return(

  class extends Component {
state = {modalShow: false}   
modalToggle = ()=> {
this.setState(ModalShow: !!error.message)}
    render() {
      return (
        <WrappedComponent>
          {error && <Modal type={error.messageType} message={error.message} />}
          {children}
        </WrappedComponent>
      );
      }
    }

)  
};

const DivWithErrorHandling = WithErrorHandler(({children}) => {
  return children
})

class App extends Component {
    state ={error: null}
    someMethode = ()=> {
      const sampleError = {//an object with message key}
      this.setState(error: sampleError)
    }
    Render(){
        return (
          <DivWithErrorHandling error={this.state.error} >
            <h1>Component</h1>
            <button onClick={this.someMethode}>
               Toggle Error
            </button>
          </DivWithErrorHandling>

        )
    }

}

• javascript
• reactjs
• higher-order-ponents

• 2 Can you also add an example on how you apply this HOC? – Shevchenko Viktor Commented Jan 21, 2019 at 15:53
• Hi could you try the following? ``` const WithErrorHandler = WrappedComponent => ({ error, children }) => { return props =>( return ( <WrappedComponent {...this.props}> ``` – Dan Commented Mar 13, 2020 at 17:26

2 Answers 2

Your HOC is accepting actual ponent & returning a children function(wrapper ponent) which again returns a class ponent.

Instead of that your HOC should accept actual ponent & return a new wrapped ponent.

This should probably fix your issue.

const WithErrorHandler = WrappedComponent => ({ error, children }) => {
  return(
    <WrappedComponent>
      {error && <Modal type={error.messageType} message={error.message} />}
      {children}
    </WrappedComponent>
  );
};

HOC is a function that takes a ponent and returns a new ponent

Your code:

const WithErrorHandler 
    = WrappedComponent // takes a ponent
         => ({ error, children }) // takes some params
              => class ... // returns a new ponent

What you actually want:

const WithErrorHandler 
    = WrappedComponent // takes a ponent
         => class ... // returns a new ponent
            // inside the class use this.props.error, this.props.children, etc.

Another way (using a functional ponent):

const WithErrorHandler 
    = WrappedComponent // takes a ponent
         => ({ error, children }) =>  <WrappedComponent>...</WrappedComponent> // returns a new ponent