title: Warning: Functions are not valid as a React child HOC
body: <p>I'm writing an HOC in Reactjs. When I'm going to return class in <code>WithErrorHandler</code> HOC I get a warning in console said </p>
  
  <blockquote>
    <p>"Functions are not valid as a React child. This may happen if you
    return a Component instead of <code>&lt;Component /&gt;</code> from render. Or maybe you
    meant to call this function rather than return it." However, if I
    remove class, warning will be gone.</p>
  </blockquote>
  
  <p>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.</p>
  
  <pre><code>import React, { Component } from 'react';
  import Modal from '../Modal'
  
  const WithErrorHandler = WrappedComponent =&gt; ({ error, children }) =&gt; {
  
  return(
  
    class extends Component {
  state = {modalShow: false}   
  modalToggle = ()=&gt; {
  this.setState(ModalShow: !!error.message)}
      render() {
        return (
          &lt;WrappedComponent&gt;
            {error &amp;&amp; &lt;Modal type={error.messageType} message={error.message} /&gt;}
            {children}
          &lt;/WrappedComponent&gt;
        );
        }
      }
  
  )  
  };
  
  const DivWithErrorHandling = WithErrorHandler(({children}) =&gt; {
    return children
  })
  
  class App extends Component {
      state ={error: null}
      someMethode = ()=&gt; {
        const sampleError = {//an object with message key}
        this.setState(error: sampleError)
      }
      Render(){
          return (
            &lt;DivWithErrorHandling error={this.state.error} &gt;
              &lt;h1&gt;Component&lt;/h1&gt;
              &lt;button onClick={this.someMethode}&gt;
                 Toggle Error
              &lt;/button&gt;
            &lt;/DivWithErrorHandling&gt;
  
          )
      }
  
  }
  </code></pre>