Here is my parent component (Grid), (here I pass more props used by hoc but I ommited them here):
<QuickBooksTable itemList={quickBooksList} />
Here is the table component:
export const QuickBooksTable = withIntegrationTable(props: : WithIntegrationTableChildProps & WithIntegrationTableProps) => ...
Here is the hoc:
export function withIntegrationTable<T extends WithIntegrationTableProps>(Component: React.ComponentType<T>) {
return (
{
itemList,
...props
}: WithIntegrationTableProps & T
) => {
const [state, setState] = useState<WithIntegrationTableState>({
tableItems: new Array<any>(),
selectedItems: new Set<string>(),
isAllItemsSelected: false
});
useEffect(() => {
const tableItems = mapItemList(itemList, currentUser);
setState({
...state,
tableItems
});
}, [itemList]);
<Component {...props as T}
tableState={state}
/>
}
}
But when it compiles it says:Element QuickBooksTable doesn't have required attribute (here is another props name)
. How should I use the types and generics to remove this error? I've tried to read the docs but I can't understand what I am doing wrong.
from How to use generic types correctly in HOC components?
No comments:
Post a Comment