0

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)

Hannah
  • 53
  • 1
  • 1
  • 6

1 Answers1

0

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?

Hannah
  • 53
  • 1
  • 1
  • 6
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://dba.stackexchange.com/questions/ask). To get notified when this question gets new answers, you can [follow](https://meta.stackexchange.com/questions/345661/the-follow-questions-and-answers-feature-is-now-live-across-the-network) this question. – Marcello Miorelli Oct 22 '22 at 10:08