title: Invalid hook call. Hooks can only be called inside... how to fix this maintaining the react class component
body: <p>I'm a react beginner, so I don't know much, I tried to invoke a function where the JWT token is taken from the Local Storage and compared with that of from the backend, by sending an Axios request so that if I get a 200 response it means I can redirect it to another page, and while it is an error I can request the user to login. (please note that this is not a professional project but I need your help very much, guys)</p>
  <p>The problem that I am facing is is the way that I set the OnClick in the cart button is correct?
  and how can I fix the React Hook Error that comes while maintaining this as a class?
  <strong>Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Link, useHistory } from &quot;react-router-dom&quot;;
  
  import axios from &quot;axios&quot;;
  
  export default class NavBar extends Component {
    // eslint-disable-next-line
    constructor(props) {
      super(props);
    }
    
    async tokenizedCartRedirect() {
      var history = useHistory();
      var token = localStorage.getItem(&quot;currentToken&quot;);
  
      if (token != &quot;&quot;) {
        const config = {
          headers: { &quot;Content-Type&quot;: &quot;application/json&quot;, &quot;x-auth-token&quot;: token },
          mode: &quot;cors&quot;,
        };
        const body = JSON.stringify(token);
        const res = axios
          .post(&quot;http://localhost:5000/auth&quot;, body, config)
          .then((res) =&gt; {
            history.push(&quot;/cart&quot;);
          })
          .catch((err) =&gt; {
            history.push(&quot;/login&quot;);
          });
      } else {
        history.push(&quot;/login&quot;);
      }
    }
  
    render() {
      //const element = (&lt;div&gt;Text from Element&lt;/div&gt;)
      return (
        &lt;header id=&quot;site-header&quot; className=&quot;site-header__v7&quot;&gt;
          &lt;div className=&quot;topbar d-none d-md-block bg-punch-light&quot;&gt;
            &lt;div className=&quot;container&quot;&gt;
              &lt;div className=&quot;topbar__nav d-lg-flex justify-content-between align-items-center font-size-2&quot;&gt;
                &lt;ul className=&quot;topbar__nav--left nav ml-lg-n3 justify-content-center&quot;&gt;
                  &lt;li className=&quot;nav-item&quot;&gt;
                    &lt;a href=&quot;#&quot; className=&quot;nav-link text-dark&quot;&gt;
                      &lt;i className=&quot;font-size-3 glph-icon flaticon-question mr-2&quot; /&gt;
                      Can we help you?
                    &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li className=&quot;nav-item&quot;&gt;
                    &lt;a href=&quot;#&quot; className=&quot;nav-link text-dark&quot;&gt;
                      &lt;i className=&quot;font-size-3 glph-icon flaticon-phone mr-2&quot; /&gt;
                      +1246-345-0695
                    &lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;masthead&quot;&gt;
            &lt;div className=&quot;bg-white border-bottom&quot;&gt;
              &lt;div className=&quot;container pt-3 pb-2 pt-lg-5 pb-lg-5&quot;&gt;
                &lt;div className=&quot;d-flex align-items-center position-relative flex-wrap&quot;&gt;
                  &lt;div className=&quot;site-branding pr-md-11 mx-auto mx-md-0&quot;&gt;
                    &lt;Link to=&quot;/&quot; className=&quot;d-block mb-1&quot;&gt;
                      &lt;img
                        src={require(&quot;../../assets/img/logo.png&quot;)}
                        className=&quot;img-fluid&quot;
                        alt=&quot;image-description&quot;
                        width=&quot;330px&quot;
                      /&gt;
                    &lt;/Link&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;site-search ml-xl-0 ml-md-auto w-r-100 flex-grow-1 mr-md-5 py-2 py-md-0&quot;&gt;
                    &lt;form className=&quot;form-inline my-2 my-xl-0&quot;&gt;
                      &lt;div className=&quot;input-group w-100&quot;&gt;
                        &lt;input
                          type=&quot;text&quot;
                          className=&quot;form-control border-right-0 px-3&quot;
                          placeholder=&quot;Search for comics by keyword&quot;
                          aria-label=&quot;Amount (to the nearest dollar)&quot;
                        /&gt;
                        &lt;div className=&quot;input-group-append border-left&quot;&gt;
                          &lt;button
                            className=&quot;btn btn-dark px-3 rounded-0 py-2&quot;
                            type=&quot;submit&quot;
                          &gt;
                            &lt;i className=&quot;mx-1 glph-icon flaticon-loupe&quot;&gt;&lt;/i&gt;
                          &lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;ul className=&quot;nav align-self-center d-none d-md-flex&quot;&gt;
                    &lt;li className=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; className=&quot;nav-link text-dark&quot;&gt;
                        &lt;i className=&quot;glph-icon flaticon-heart font-size-4&quot;&gt;&lt;/i&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li className=&quot;nav-item&quot;&gt;
                      &lt;Link
                        to=&quot;/login&quot;
                        id=&quot;sidebarNavToggler&quot;
                        role=&quot;button&quot;
                        className=&quot;nav-link text-dark&quot;
                        aria-controls=&quot;sidebarContent&quot;
                        aria-haspopup=&quot;true&quot;
                        aria-expanded=&quot;false&quot;
                        data-unfold-event=&quot;click&quot;
                        data-unfold-hide-on-scroll=&quot;false&quot;
                        data-unfold-target=&quot;#sidebarContent&quot;
                        data-unfold-type=&quot;css-animation&quot;
                        data-unfold-overlay='{
                                            &quot;className&quot;: &quot;u-sidebar-bg-overlay&quot;,
                                            &quot;background&quot;: &quot;rgba(0, 0, 0, .7)&quot;,
                                            &quot;animationSpeed&quot;: 500
                                        }'
                        data-unfold-animation-in=&quot;fadeInRight&quot;
                        data-unfold-animation-out=&quot;fadeOutRight&quot;
                        data-unfold-duration=&quot;500&quot;
                      &gt;
                        &lt;i className=&quot;glph-icon flaticon-user font-size-4&quot;&gt;&lt;/i&gt;
                      &lt;/Link&gt;
                    &lt;/li&gt;
                    &lt;li className=&quot;nav-item&quot;&gt;
                      &lt;dev
                        id=&quot;sidebarNavToggler1&quot;
                        role=&quot;button&quot;
                        className=&quot;nav-link pr-0 text-dark position-relative&quot;
                        aria-controls=&quot;sidebarContent1&quot;
                        aria-haspopup=&quot;true&quot;
                        aria-expanded=&quot;false&quot;
                        data-unfold-event=&quot;click&quot;
                        data-unfold-hide-on-scroll=&quot;false&quot;
                        data-unfold-target=&quot;#sidebarContent1&quot;
                        data-unfold-type=&quot;css-animation&quot;
                        data-unfold-overlay='{
                                            &quot;className&quot;: &quot;u-sidebar-bg-overlay&quot;,
                                            &quot;background&quot;: &quot;rgba(0, 0, 0, .7)&quot;,
                                            &quot;animationSpeed&quot;: 500
                                        }'
                        data-unfold-animation-in=&quot;fadeInRight&quot;
                        data-unfold-animation-out=&quot;fadeOutRight&quot;
                        data-unfold-duration=&quot;500&quot;
                      &gt;
                        &lt;i
                          className=&quot;glph-icon flaticon-icon-126515 font-size-4&quot;
                          onClick={this.tokenizedCartRedirect()}
                        &gt;&lt;/i&gt;
                      &lt;/dev&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;border-bottom py-3 py-md-0&quot;&gt;
              &lt;div className=&quot;container&quot;&gt;
                &lt;div className=&quot;d-md-flex position-relative&quot;&gt;
                  &lt;div className=&quot;site-navigation mr-auto d-none d-xl-block&quot;&gt;
                    &lt;ul className=&quot;nav&quot;&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                        &lt;Link
                          to=&quot;/&quot;
                          className=&quot;nav-link link-black-100 mx-2 px-0 py-3 font-weight-medium active border-bottom border-primary border-width-2&quot;
                        &gt;
                          Home
                        &lt;/Link&gt;
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                        &lt;Link
                          to=&quot;/products&quot;
                          className=&quot;nav-link link-black-100 mx-2 px-0 py-3 font-weight-medium active border-bottom border-primary border-width-2&quot;
                        &gt;
                          Browse Comics
                        &lt;/Link&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;d-none d-md-block ml-md-auto secondary-navigation &quot;&gt;
                    &lt;ul className=&quot;nav&quot;&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                        &lt;a
                          href=&quot;#&quot;
                          className=&quot;nav-link link-black-100 mx-2 px-0 py-3 font-weight-medium&quot;
                        &gt;
                          Subscription Pricing
                        &lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/header&gt;
      );
    }
  }
  
  </code></pre>