title: React JS - Invariant violation error while using HOC
body: <p>While learning higher order component in react, I was trying to use it in my code. While doing so, I am getting "Invariant Violation Error"</p>
  
  <pre><code>//Higher Order Component
  const withStyles = (OriginalComponent) =&gt; {
    class NewComponent extends React.Component{
      render(){
        return &lt;OriginalComponent /&gt;  
      }
    }
    return NewComponent;
  }
  
  class FancyButton extends React.Component {
    render() {
      return &lt;button&gt;Fancy button&lt;/button&gt;;
    }
  }
  
  
  const App = props =&gt; {
  //I am calling the HOC to get my updated component
    let Enhanced = withStyles(&lt;FancyButton /&gt;);
  
    return (
        &lt;Enhanced /&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  
  </code></pre>
  
  <p>Here I am calling the HOC(withStyles) and storing the returned component in a variable "Enhanced". In the App component, Can I directly call Enhanced component like  ?</p>
  
  <p>I expect the output should be button element, but I am getting "Invariant Violation" error</p>