title: how to throw a react-alert inside of a function in a class based component
body: <p>Using react-alert module for alerts
  My code looks like this -
  index.js:</p>
  
  <pre><code>const options = {
      // you can also just use 'bottom center'
      position: positions.TOP_CENTER,
      timeout: 5000,
      offset: '30px',
      type: types.ERROR,
      // you can also just use 'scale'
      transition: transitions.FADE
    }
  ReactDOM.render(&lt;AlertProvider template={AlertTemplate} {...options}&gt;
      &lt;App /&gt;&lt;/AlertProvider&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>class App extends React.Component { //then my state, functions, constructors,
  //here is the problem
  nextClicked = (e) =&gt; {
      if (//something) {
        if (//something) {
  
        const alert = useAlert();
        alert.show("ERROR MESSAGE!!!");
    }
  } // etc
  export default withAlert()(App)
  </code></pre>
  
  <p>Basically, I am getting the 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:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow noreferrer">https://reactjs.org/warnings/invalid-hook-call-warning.html</a> for tips about how to debug and fix this problem.</p>