title: Is it possible to use React Hooks in class component by using HOC(Higher Order Component)?
body: <p>Can I use the functional components in class components? I am going to call a function that is extracted from a functional component in class component. But it is giving errors like the following.</p>
  <blockquote>
  <p><strong>Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons</strong></p>
  </blockquote>
  <p>So I tried to call it in the functional component but <strong>even in the functional component</strong>, I got the same error as when I call it in class component.</p>
  <blockquote>
  <p>Functional component</p>
  </blockquote>
  <pre><code>import React, { useEffect } from 'react';
  import { UseWalletProvider, useWallet } from 'use-wallet';
  import { providers } from 'ethers';
  
  export function App() {
    useEffect(() =&gt; {
      async function GetBlockId() {
        const wallet = useWallet();
        console.log(wallet); // =====&gt; This is not displaying.
        const { ethereum, connect } = wallet;
        const ethersProvider = new providers.Web3Provider(ethereum);
        const { blockNumber } = await ethersProvider.getTransaction(hash);
        console.log(blockNumber);
      };
      GetBlockId()
    }, []);
  
    return &lt;div&gt;
      &lt;h1&gt;{wallet}&lt;/h1&gt;
    &lt;/div&gt;
  }
  </code></pre>
  <blockquote>
  <p>Class component</p>
  </blockquote>
  <pre><code>import React, { Component } from 'react'
  import { GetBlockId } from './util';   // =====&gt;&gt; I hope to get result from here.
  import { hash } from './hash'
  
  export default class App extends Component {
      constructor(props) {
          super(props)
      }
      componentDidMount(): void {
          const blockNumber: any = GetBlockId(hash);
          console.log(blockNumber);
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;test&lt;/h1&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <blockquote>
  <p>util.tsx</p>
  </blockquote>
  <pre><code>import React, { useEffect } from 'react';
  import { UseWalletProvider, useWallet } from 'use-wallet';
  import { providers } from 'ethers';
  // import { Container } from './styles';
  
  export function GetBlockId() {
    useEffect(() =&gt; {
      async function GetBlockId() {
        const wallet = useWallet();
        const { ethereum, connect } = wallet;
        const ethersProvider = new providers.Web3Provider(ethereum);
        const { blockNumber } = await ethersProvider.getTransaction(hash);
        return blockNumber;
      };
      GetBlockId()
    }, []);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/FuuDv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FuuDv.png" alt="enter image description here" /></a></p>
  <p>So finally I hope to use <strong>&quot;use-wallet&quot;</strong> package in the class component. Is that possible? If yes, how to use <strong>useWallet</strong> hook in the class component?</p>