WHy is this error message
Property 'key' does not exist on type 'string | { key: string; element: Element; }'
when I input the following code
<th key={header?.key ? header.key : header} ref={ref}>
Header has the following type, so it should allow .key
export type Column<T = any> = {
header: {key: string, element: JSX.Element} | string;
size: keyof typeof COLUMN_SIZES;
sortable?: boolean;
property: string;
ref?: React.MutableRefObject<HTMLTableHeaderCellElement>;
render?: (datum: T, index?: number) => string;
renderer?: React.FC<IRendererProps>;
};
>Solution :
string doesn’t have a key property, and header can be a string, so TypeScript doesn’t allow you to access its key unconditionally. You need to add a check to narrow the type before accessing key.
One way to do that is to check whether it’s actually a string:
typeof header == 'string' ? header : header?.key