title: React convert function component to class component
body: <p>I am using the react <code>react-i18next</code> package for language translation.</p>
  
  <p>The function component that I have works correctly without any error</p>
  
  <pre><code>import React, { Suspense } from 'react';
  import { useTranslation } from 'react-i18next';
  
  function MyComponent() {
    const { t, i18n } = useTranslation();
  
    return (&lt;Suspense fallback="loading"&gt;
             &lt;h1&gt;{t('Welcome to React')}&lt;/h1&gt;
            &lt;/Suspense&gt;);
  }
  
  export default MyComponent;
  </code></pre>
  
  <p>when I tried converting this to a class as below</p>
  
  <pre><code>import React, { Component, Suspense } from 'react';
  import { useTranslation } from 'react-i18next';
  
  class MyComponent extends Component {
      constructor(props) {
          super(props);
      }
      render() {
          const { t, i18n } = useTranslation();
          return (
          &lt;Suspense fallback="loading"&gt;
              &lt;h1&gt;{t('hello')}&lt;/h1&gt;
          &lt;/Suspense&gt;
          );
      }
  }
  
  export default MyComponent;
  </code></pre>
  
  <p>I get the error</p>
  
  <blockquote>
    <p>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:</p>
  </blockquote>
  
  <p>Can someone point me to what am I doing incorrect?</p>