How to use datepicker in React?

Question

This is my basic react code:

import React, {Component} from 'react'
import { useState } from 'react';
import DatePicker from 'react-date-picker';

export default class TestComponent extends Component{
    constructor(props){
        super(props)
        this.state = {response: ""}
    }

    callServerApi(){
        fetch("http://localhost:9000/test")
            .then(response => response.text())
            .then(responseText => this.setState({response: responseText}))
    }

    componentWillMount(){
        this.callServerApi();
    }
    
    const [value, onChange] = useState(new Date());

    render(){
        return (
            <div>
                <p>hello from the test component</p>
                
                <form>
                  <label>
                    Select Meeting Date: <br/>
                    <input type="text" name="name" />
                  </label>
                  <input type="submit" value="Submit" />
                </form>
                
                <DatePicker
                    onChange={onChange}
                    value={value}
                />
                
                <p>{this.state.response}</p>
            </div>
            
            
            
        )
    }
}

I am trying to use this one: https://www.npmjs.com/package/react-date-picker

But getting this error, don't know, how to correct install it. I am very new to react.

SyntaxError: D:\\src\\components\\test.component.js: Unexpected token (21:7

Answer 1

You are using the 'useState' hook inside a class component, and having the declaration for const in line 21 is throwing this error.

You can use the state like below and set the state value when the date is changed on the picker.

export default class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { response: "", value: new Date() };
  }

  callServerApi() {
    fetch("http://localhost:9000/test")
      .then((response) => response.text())
      .then((responseText) => this.setState({ response: responseText }));
  }

  componentWillMount() {
    this.callServerApi();
  }

  render() {
    return (
      <div>
        <p>hello from the test component</p>

        <form>
          <label>
            Select Meeting Date: <br />
            <input type="text" name="name" />
          </label>
          <input type="submit" value="Submit" />
        </form>

        <DatePicker
          onChange={(value) => this.setState({ value })}
          value={this.state.value}
        />

        <p>{this.state.response}</p>
      </div>
    );
  }
}

Answer 2

You mixed a function and class components style

import React, { Component } from 'react';
import DatePicker from 'react-date-picker';


export default class TestComponent extends Component {
  constructor(props) {
    super(props);
-    this.state = { response: '' };
+    this.state = { response: '', value:new Date() };
  }

  callServerApi() {
    fetch('http://localhost:9000/test')
      .then((response) => response.text())
      .then((responseText) => this.setState({ response: responseText }));
  }

  componentWillMount() {
    this.callServerApi();
  }
  
- const [value, onChange] = useState(new Date());
+ onChange = (value) => this.setState({value})

  render() {
    return (
      <div>
        <p>hello from the test component</p>

        <form>
          <label>
            Select Meeting Date: <br />
            <input type="text" name="name" />
          </label>
          <input type="submit" value="Submit" />
        </form>

        <DatePicker onChange={onChange} value={value} />

        <p>{this.state.response}</p>
      </div>
    );
  }
}

Answer 3

You can not use useState hook inside a react class component. If you want to use the useState hook, then you should use a functional component. It should be like this:

import React, { useState, useEffect } from 'react';
import DatePicker from 'react-date-picker';

export default function TestComponent() {
    const [value, onChange] = useState(new Date());
    const [response, setResponse] = useState("");
    useEffect(() => {
      callServerApi();
    },[])

    const callServerApi = () => {
        fetch("http://localhost:9000/test")
            .then(response => response.text())
            .then(responseText => setResponse(responseText))
    }

    return (
       <div>
          <p>hello from the test component</p>
          <form>
             <label>
                Select Meeting Date: <br/>
                <input type="text" name="name" />
             </label>
             <input type="submit" value="Submit" />
          </form>

          <DatePicker
             onChange={onChange}
             value={value}
          />
                
          <p>{this.state.response}</p>
       </div>
     )
    }