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)