Unable to declare constant in react class

Question

I am trying to implement datepicker in react class and in this process I have declared the const in one the react class which I am working on and I am getting the parsing error.Could some one please help here what is wrong with declaration ?

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import {Card, Container,Table,Form,InputGroup,Col,Button} from 'react-bootstrap';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import '../css/category.css';


class Categories extends React.Component{

  const date = useState(new Date());
  
   constructor(props){
     super(props);
   }

    componentDidMount() {
        document.title="Categories";
    }
   render(){

        return(<div>
            <Container fluid className="categorycardcont">
                <Card border="info">
                    <Card.Header className="categorycarddheader">CATEGORY SEARCH</Card.Header>
                    <Card.Title className="categorycardtitle"> Here one can find the category details involved in WebSite construction</Card.Title>
                    <Card.Body>
                      <Form>
                        <Form.Row className="align-items-center">
                          <Col sm={3} className="my-1">
                            <Form.Label>Category</Form.Label>
                            <Form.Control as="select">
                              <option>Please select Category here</option>
                              <option>Food</option>
                              <option>Travel</option>
                              <option>Restaurant</option>
                              <option>Technology</option>
                              <option>Gadgets</option>
                            </Form.Control>
                          </Col>
                          <Col sm={3} className="my-1">
                            <Form.Label>Created by</Form.Label>
                            <InputGroup>
                              <InputGroup.Prepend>
                                  <InputGroup.Text>@</InputGroup.Text>
                              </InputGroup.Prepend>
                              <Form.Control id="inlineFormInputGroupUserName" placeholder="UserName" />
                            </InputGroup>
                          </Col>
                          <Col sm={2} className="my-1">
                            <Form.Label>Created on</Form.Label>
                            <InputGroup>
                              <DatePicker selected={date}/>
                            </InputGroup>
                          </Col>
                          <Col sm={1} className="my-1">
                            <Form.Label>Active</Form.Label>
                            <Form.Check type="checkbox" id="autoSizingCheck2" className="activeCheckbox"/>
                          </Col>
                          <Col sm={1} className="searchButton">
                            <Button variant="success">Click Me!</Button>
                          </Col>
                        </Form.Row>
                      </Form>
                    </Card.Body>
                </Card>
            </Container>
            <Container fluid className="categorytablecont">
                <Table striped bordered hover variant="dark">
                    <thead>
                    <tr>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Created By</th>
                        <th>Created On</th>
                        <th>Updated By</th>
                        <th>Updated On</th>
                    </tr>
                    </thead>
                </Table>
            </Container>
        </div>
);
    }
}

export default Categories;

I am getting the below error.

Failed to compile ./src/components/Categories.js Line 11:9: Parsing error: Unexpected token

9 | class Categories extends React.Component{ 10 |

11 | const date = useState(new Date()); | ^ 12 |
13 | constructor(props){ 14 | super(props); This error occurred during the build time and cannot be dismissed.

Answer 1

You cannot use hooks in class component. Create a state with the default date like below,

 constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

And access it in the template,

 <InputGroup>
   <DatePicker selected={this.state.date} />
  </InputGroup>

Working code - https://codesandbox.io/s/elated-waterfall-s8n7c?file=/src/App.js

Answer 2

You cannot use useState inside class components. They are meant to be used in functional components. You should change your code to:

constructor(props){
   super(props);
   this.state = {
       myDate: new Date()
   };
}

Here you can find more information about Hooks.

Answer 3

seems like you have been confused on use of hooks, hooks can be used only in functional components so your code for functional component will be something as

function Categories(props) {
 const date = useState(new Date());

 useEffect(() => {
  // is equivalent to didmount
  document.title = "Categories";
 
 }, [])

return (
 //// return what you are rendering
 )

}