During a React & Typescript version upgrade and subsequent dependency update, it seems that my implementation of using connectRefinementList from react-instantsearch-dom is now complaining about having children as part of it's usage, whereas there were none before.
TS2322: Type '{ children: string; attribute: string; limit: number; searchable: true; showMore: true; }'
is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<RefinementListExposed
, any, any>> & Readonly<...>'. Property 'children' does not exist on type 'IntrinsicAttributes &
IntrinsicClassAttributes<Component<RefinementListExposed, any, any>> & Readonly<...>'.
My usage is as such:
CustomRefinementList
const RefinementList: React.FC<React.PropsWithChildren<any>> = (props) => {
// other stuff here
return (
<div>{props.children}</div>
)
};
const CustomRefinementList = connectRefinementList(RefinementList);
...
// Error highlights this CustomRefinementList element
<CustomRefinementList attribute="some-attr" limit={5} searchable showMore>
Some children here
</CustomRefinementList>
Is there something I'm missing here, or has the functionality just gone weird since updating from 6.22.0 to 6.39.1?
Looking into connectRefinementList:
export function connectRefinementList(
stateless: React.FunctionComponent<RefinementListProvided>,
): React.ComponentClass<RefinementListExposed>;
With its used types being defined as
export interface RefinementListProvided {
refine: (value: string[]) => any;
createURL: (...args: any[]) => any;
currentRefinement: string[];
items: Array<Hit<{ count: number; isRefined: boolean; label: string; value: string[] }>>;
searchForItems: (...args: any[]) => any;
isFromSearch: boolean;
canRefine: boolean;
}
export interface RefinementListExposed {
attribute: string;
searchable?: boolean | undefined;
operator?: 'or' | 'and' | undefined;
showMore?: boolean | undefined;
limit?: number | undefined;
showMoreLimit?: number | undefined;
defaultRefinement?: string[] | undefined;
facetOrdering?: boolean | undefined;
transformItems?: ((...args: any[]) => any) | undefined;
}
Of course, none of these have children defined... But I'm not entirely sure why it wouldn't accept me giving children to it?