CODEWITHSUNDEEP
javascriptreactjsreact-native
V3nky
V3nky

Reputation: 92

Unable to declare constant in react class

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.

Upvotes: 2

Views: 1122

Answers (3)

Aashish Karki
Aashish Karki

Reputation: 356

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
 )

}

Upvotes: 0

Michael S. Molina
Michael S. Molina

Reputation: 732

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.

Upvotes: 1

Sarun UK
Sarun UK

Reputation: 6736

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

Upvotes: 2

Related Questions