title: Unable to use useState in class component React.js
body: <p>I am trying to create constants in react as follows:</p>
  
  <pre><code>const [firstFocus, setFirstFocus] = React.useState(false);
  const [lastFocus, setLastFocus] = React.useState(false);
  </code></pre>
  
  <p>The constants are being used in the code as follows:</p>
  
  <pre><code>import React, { Component } from 'react'
  import axios from 'axios'
  
  import {
      Button,
      Card,
      CardHeader,
      CardBody,
      CardFooter,
      Form,
      Input,
      InputGroupAddon,
      InputGroupText,
      InputGroup,
      Container,
      Col
  } from "reactstrap";
  
  class PostForm extends Component {
      constructor(props) {
          super(props)
  
          this.state = {
              email: '',
              password: ''
          }
      }
  
      changeHandler = (e) =&gt; {
          this.setState({ [e.target.name]: e.target.value })
      }
  
      submitHandler = (e) =&gt; {
          e.preventDefault()
          console.log(this.state)
          axios.post('https://jsonplaceholder.typicode.com/posts', this.state)
              .then(response =&gt; {
                  console.log(response)
              })
              .catch(error =&gt; {
                  console.log(error)
              })
      }
  
  
      render() {
          const { email, password } = this.state
          **const [firstFocus, setFirstFocus] = React.useState(false);
          const [lastFocus, setLastFocus] = React.useState(false);**
          return (
  
              &lt;div&gt;
                  &lt;Col className="ml-auto mr-auto" md="4"&gt;
                      &lt;Card className="card-login card-plain"&gt;
                          &lt;Form onSubmit={this.submitHandler} className="form"&gt;
                              &lt;CardHeader className="text-center"&gt;
                              &lt;/CardHeader&gt;
                              &lt;CardBody&gt;
                                  &lt;InputGroup
                                      className={
                                          "no-border input-lg"
                                      }
                                  &gt;
                                      &lt;InputGroupAddon addonType="prepend"&gt;
                                          &lt;InputGroupText&gt;
                                              &lt;i className="now-ui-icons ui-1_email-85"&gt;&lt;/i&gt;
                                          &lt;/InputGroupText&gt;
                                      &lt;/InputGroupAddon&gt;
                                      &lt;Input
                                          placeholder="Email"
                                          type="text"
                                          name="email"
                                          value={email}
                                          onChange={this.changeHandler}
                                      // onFocus={() =&gt; setFirstFocus(true)}
                                      // onBlur={() =&gt; setFirstFocus(false)}
                                      &gt;&lt;/Input&gt;
                                  &lt;/InputGroup&gt;
                                  &lt;InputGroup
                                      className={
                                          "no-border input-lg"
                                      }
                                  &gt;
                                      &lt;InputGroupAddon addonType="prepend"&gt;
                                          &lt;InputGroupText&gt;
                                              &lt;i className="now-ui-icons ui-1_lock-circle-open"&gt;&lt;/i&gt;
                                          &lt;/InputGroupText&gt;
                                      &lt;/InputGroupAddon&gt;
                                      &lt;Input
                                          placeholder="Password"
                                          type="password"
                                          name="password"
                                          value={password}
                                          onChange={this.changeHandler}
                                      // onFocus={() =&gt; setLastFocus(true)}
                                      // onBlur={() =&gt; setLastFocus(false)}
                                      &gt;&lt;/Input&gt;
                                  &lt;/InputGroup&gt;
                              &lt;/CardBody&gt;
                              &lt;CardFooter className="text-center"&gt;
                                  &lt;Button
                                      block
                                      className="btn-round"
                                      color="info"
                                      type="submit"
                                      size="lg"
                                  &gt;
                                      Get Started
                      &lt;/Button&gt;
                                  &lt;div className="pull-right"&gt;
                                      &lt;h6&gt;
                                          &lt;a
                                              className="link"
                                              href="#pablo"
                                              onClick={e =&gt; e.preventDefault()}
                                          &gt;
                                              Need Help?
                          &lt;/a&gt;
                                      &lt;/h6&gt;
                                  &lt;/div&gt;
                              &lt;/CardFooter&gt;
                          &lt;/Form&gt;
                      &lt;/Card&gt;
                  &lt;/Col&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default PostForm
  </code></pre>
  
  <p>However, when I try to do this I get the following error:</p>
  
  <blockquote>
    <p>Invalid hook call. Hooks can only be called inside of the body of a
    function component.</p>
  </blockquote>
  
  <p>I created another constant there for email and password and it worked just fine so I'm not sure why my useState constants aren't working. Any help or guidance is much appreciated as I am very new to react. Thanks!</p>