REACT SingleDatePicker calendar not opening

Question

I am trying to add a drop down calendar but I get warning from the code below and there is not drop down calendar when cursor was placed over the input box.

Warning from the developer tool, console panel:

VM2542 react-dom.development.js:86 Warning: componentWillReceiveProps has been renamed, and >is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: >https://reactjs.org/link/derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all >deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe->lifecycles in your project source folder.

Please update the following components: DateInput

ExpenseForm.js

import React from "react";
import moment from "moment";
import 'react-dates/lib/css/_datepicker.css'
import 'react-dates/initialize';
import { SingleDatePicker } from "react-dates";
export default class ExpenseForm extends React.Component {
    state = {
        createdAt: moment(),
        calendarFocused: false
    }
    onDateChange = (createAt) => {
        this.setState(()=>({createAt}))
    }
    onFocusChange = ({focused}) => {
        this.setState(()=>{calendarFocused: focused})
    }
    render(){
        return (
            <div>
            <SingleDatePicker
                date={this.state.createdAt} // momentPropTypes.momentObj or null
                onDateChange={this.onDateChange} // PropTypes.func.isRequired
                focused={this.state.calendarFocused} // PropTypes.bool
                onFocusChange={this.onFocusChange} // PropTypes.func.isRequired
                numberOfMonths={1}
                isOutsideRange={()=>false}
            />
            <button>Submit</button>
            </div>
        )
    }
}

I am also getting a hint warning on VSCode on the line:

import 'react-dates/initialize';

Could not find a declaration file for module 'react-dates/initialize'. 'c:/Users/PEI WAI LEE/Programming/ReactCourse/my-provider/node_modules/react-dates/initialize.js' implicitly has an 'any' type. If the 'react-dates' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dates'ts(7016)

Answer 1

I change this line

 onFocusChange = ({focused}) => {
        this.setState(()=>{calendarFocused: focused})
    }

to

 onFocusChange = ({focused}) => {
        this.setState(()=>({calendarFocused: focused}))
    }

without the brackets the statement won't return calendarFocused The calendar is now showing when I hover the cursor to the input box

can someone advise the warning and the hit warning on VSCode?