title: Why does a useCallback option have to be called with a class component in Reactjs?
body: <p>I am stumped. I have been trying to get a simple cleartext button to work. I have tried all the option available on this platform but nothing is working for me.  React Hook <code>useCallback</code> cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook. I have no idea why this error is occurring. I am pretty new to react can anyone please help? I am trying to clear the text on a click of the clear button.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component, useCallback, useState  } from "react";
  
  
  import {
    Button,
    Input,
    Footer,
    Card,
    CardBody,
    CardImage,
    CardTitle,
    CardText
  } from "mdbreact";
  
  import blankImg from "./blank.gif";
  
  import "./style.css";
  import "./flags.min.css";
  
  import countriesList from "./countries.json";
  
  class App extends Component {
    state = {
      search: ""
    };
  
    renderCountry = country =&gt; {
      const { search } = this.state;
      var code = country.code.toLowerCase();
  
      const handleClick = useCallback(() =&gt; {
        e.target.value = '';
      }, []);
     
      return (
        &lt;div className="col-md-3" style={{ marginTop: "20px" }}&gt;
          &lt;Card&gt;
            &lt;CardBody&gt;
              &lt;p className=""&gt;
                &lt;img
                  src={blankImg}
                  className={"flag flag-" + code}
                  alt={country.name}
                /&gt;
              &lt;/p&gt;
              &lt;CardTitle title={country.name}&gt;
                {country.name.substring(0, 15)}
                {country.name.length &gt; 15 &amp;&amp; "..."}
              &lt;/CardTitle&gt;
            &lt;/CardBody&gt;
          &lt;/Card&gt;
        &lt;/div&gt;
      );
    };
  
    onchange = e =&gt; {
      this.setState({ search: e.target.value });
    };
    
    
  
    render() {
      const { search } = this.state;
      const filteredCountries = countriesList.filter(country =&gt; {
        return country.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
      });
     
  
      return (
        &lt;div className="flyout"&gt;
          &lt;main style={{ marginTop: "4rem" }}&gt;
            &lt;div className="container"&gt;
              &lt;div className="row"&gt;
               
                &lt;div className="col"&gt;
                  &lt;Input
                    label="Search Country"
                    icon="search"
                    onChange={this.onchange}
                  /&gt;
                  &lt;button onClick={handleClick}&gt; Click to clear&lt;/button&gt;
                &lt;/div&gt;
                &lt;div className="col" /&gt;
              &lt;/div&gt;
              &lt;div className="row"&gt;
                {filteredCountries.map(country =&gt; {
                  return this.renderCountry(country);
                })}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/main&gt;
          &lt;Footer color="indigo"&gt;
            &lt;p className="footer-copyright mb-0"&gt;
              &amp;copy; {new Date().getFullYear()} Copyright
            &lt;/p&gt;
          &lt;/Footer&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>