CODEWITHSUNDEEP
reactjstypescriptfrontenddaterangepickerrsuite
scooby.steve
scooby.steve

Reputation: 5

How to store data into variable with DateRangePicker from rsuite?

I am trying to store a date range into an array using DateRangePicker from rsuite. Right now my application works as intended, but I am still getting some errors in Typescript. How do I do this correctly?

import { DateRangePicker } from "rsuite";

const [dateRange, setDateRange] = useState([]);

<DateRangePicker
   format="MM/dd/yyyy"
   character=" – "
   value={dateRange}          //value has error
   onChange={setDateRange}    //onChange has error
/>

Value error: Type 'never[]' is not assignable to type '[Date, Date]'. Target requires 2 element(s) but source may have fewer.ts(2322)

onChange error: Type 'Dispatch<SetStateAction<never[]>>' 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<never[]>'. Type 'null' is not assignable to type 'SetStateAction<never[]>'.ts(2322)

I have also tried the following but the "range" in setDate(range)" is also throwing an error

<DateRangePicker
   format="MM/dd/yyyy"
   character=" – "
   onChange={(range) => setDateRange(range)}    //2nd range has error
/>

range error: Argument of type 'DateRange | null' is not assignable to parameter of type 'SetStateAction<never[]>'. Type 'null' is not assignable to type 'SetStateAction<never[]>'.ts(2345)

Upvotes: 0

Views: 435

Answers (1)

Jai248
Jai248

Reputation: 1649

You have to use type which is defined as `` The type of the value is ValueType. Check the prop types in the official doc. Just import the ValueType or use the type as [Date?, Date?]

You can check sandbox running example

import * as React from "react";
import { DateRangePicker } from "rsuite";
import { ValueType } from "rsuite/DateRangePicker";

export default function App() {
  const [dateRange, setDateRange] = React.useState<ValueType>([]);
  return (
    <DateRangePicker
      format="MM/dd/yyyy"
      character=" – "
      value={dateRange} //value has error
      onChange={setDateRange} //onChange has error
    />
  );
}

Upvotes: 0

Related Questions