1

I am trying to setup a SingleDatePicker as below but the import for 'react-dates/initialize' is showing hint error as below

module "c:/Users/LEE/Programming/ReactCourse/my-provider/node_modules/react-dates/initialize" Could not find a declaration file for module 'react-dates/initialize'. 'c:/Users/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)

Please advise

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 = {
        description: '',
        note: '',
        amount:'',
        createdAt: moment(),
        calenderFocused: false
    }
    onDescriptionChange = (e) =>{
        const description = e.target.value
        this.setState(()=>({description}))
    }
    onNoteChange = (e) => {
        const note = e.target.value
        this.setState(()=> ({note}))
    }
    onAmountChange = (e) => {
        const amount = e.target.value
        if (amount.match(/^\d*(\.\d{0,2})?$/)) {
            this.setState(()=>({amount}))
        }
    }
    onDateChange = (createAt) => {
        this.setState(()=>({createAt}))
    }
    onFocusChange = ({focused}) => {
        this.setState(()=>{calenderFocused: focused})
    }
    render(){
        return (
            <div>
            <input 
                type='text'
                placeholder="description"
                autoFocus
                value={this.state.description}
                onChange={this.onDescriptionChange}
            ></input>
            <input
                type='text'
                placeholder="amount"
                value={this.state.amount}
                onChange={this.onAmountChange}
            ></input>
            <SingleDatePicker
                date={this.state.createdAt} // momentPropTypes.momentObj or null
                onDateChange={this.onDateChange} // PropTypes.func.isRequired
                focused={this.state.calenderFocused} // PropTypes.bool
                onFocusChange={this.onFocusChange} // PropTypes.func.isRequired
                numberOfMonths={1}
                isOutsideRange={()=>false}
            />
            <textarea
                placeholder="Please write a note (optional)"
                value={this.state.note}
                onChange={this.onNoteChange}
            ></textarea>
            <button>Submit</button>
            </div>
        )
    }
}
Hannah
  • 53
  • 1
  • 1
  • 6

0 Answers0