Wednesday 21 July 2021

How to use generic types correctly in HOC components?

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