How to solve 'Dispatch<SetStateAction<Date[]>>' is not assignable to type '(value: DateRange | null, event: SyntheticEvent<Element, Event>) => void'

Question

In Rsuite DateRangePicker, an Error is coming like Type 'Dispatch<SetStateAction<Date[]>>' is not assignable to type '(value: DateRange | null, event: SyntheticEvent<Element, Event>) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'DateRange | null' is not assignable to type 'SetStateAction<Date[]>'. Type 'null' is not assignable to type 'SetStateAction<Date[]>'.ts(2322)

onst DateRange = () => {
  const styles = {
    width: 260,
    display: 'block',
    marginBottom: 50,
    marginTop: 50,
    marginLeft: 20,
  }

  const [state, setstate] = useState([new Date('2017-02-01'), new Date('2017-05-20')])

  const { combine, allowedMaxDays, beforeToday } = DateRangePicker

  console.log(state)

  return (
    <>
      <h2>Sample POC for the Custom Date Range</h2>
      <DateRangePicker
        placeholder="Select a Date Range"
        format="dd-MM-yyyy"
        showOneCalendar
        style={styles}
        //disabledDate={combine(allowedMaxDays(7), beforeToday())}
        onChange={setstate}
        ranges={[
          {
            label: 'Yesterday',
            value: [addDays(new Date(), -1), addDays(new Date(), -1)],
          },
          {
            label: 'Today',
            value: [new Date(), new Date()],
          },
         
        ]}
      ></DateRangePicker>
    </>
  )
}

Can anyone let me know, how can we solve this issue?

Answer 1

Your useState implies that your data is of type Date[], but your are trying to set a function instead.

Solution is to set a specific type on setState and set only the date data instead of the whole function.

//set type in <> before useState
  const [state, setstate] = useState<DateRange | null>([new Date('2017-02-01'), new Date('2017-05-20')])

const handleChange = (value: DateRange | null, event: SyntheticEvent<Element, Event>)) => {

setState(value) //<--- set date
}

//...
        onChange={handleChange} //<--- Get date and event data
//...