I am trying to use the useState Hook with a custom object that contains two arrays as shown below
const [initConfig, setInitConfig] = useState<>({filter:[], sort:[]});
However, I am unsure of how to declare inside the angle brackets.
The filter array will consist of items of type:
export interface IFilterTerm {
key: string;
criteria?: CriteriaType;
value: string;
}
The sort array will have items of type:
type ISortGridItem = {
colId: string | undefined;
sort: string | null | undefined;
}
I am setting values like this:
setInitConfig({
filter : [...persistentConfig.filter],
sort : [...persistentConfig.sort]
});
const persistentConfig = {
filter: [
{ key:TIME, criteria: CriteriaType.DataRange, "value":"currentBusinessDay"},
{ key:INCLUDE_SYNTHETIC_LEGS, criteria: CriteriaType.Equals, value:"false" },
{ key:"waterfall", criteria: CriteriaType.Equals, value:"true" }
],
sort: [
{
colId: "time",
sort: "asc"
}
]
}
I attempted to declare useState like this:
const [initConfig, setInitConfig] = useState<{ filter: IFilterTerm[] , sort: ISortingTerm }[]>({filter:[], sort:[]});
Unfortunately, it did not work and I received an error message:
Argument of type '{ filter: never[]; sort: never[]; }' is not assignable to parameter of type '{ filter: IFilterTerm[]; sort: ISortingTerm; }[] | (() => { filter: IFilterTerm[]; sort: ISortingTerm; }[])'
Types of property 'filter' are incompatible.
Type 'never[]' is not assignable...