React Date Range Picker error in date variables

Question

I am unable to understand how to resolve the below error on the newStartDate and newEndDate. I got this code as a part of a starter code for a DatePicker component.

The error I see when I hover over the newStartDate and newEndDate red lines is :

Binding element 'newStartDate' implicitly has an 'any' type.ts(7031)

const handleInputValuesChange = ({
    startDate: newStartDate,
    endDate: newEndDate
  }) => {
    setStartInputValue(newStartDate || '')
    setEndInputValue(newEndDate || '')
  }

  const handleDatesChange = ({
    startDate: newStartDate,
    endDate: newEndDate
  }) => {
    setStartDate(newStartDate)
    setEndDate(newEndDate)
  }

screenshot of the code with the error hghlighted

What I am unable to understand is what does startDate: newStartDate and endDate: newEndDate actually represent ? And how do I resolve the error ? Do I need to declare newStartDate as a type ? Or a variable ? And where ?

Answer 1

Because you are using typescript but you don't define the type for params of handleDatesChange

const handleDatesChange = ({
  startDate: newStartDate,
  endDate: newEndDate,
}: {
  startDate: Date;
  endDate: Date;
}) => {
  setStartDate(newStartDate);
  setEndDate(newEndDate);
};