Type '{ tabs: TabsProps[] | undefined; }' is not assignable to type 'IntrinsicAttributes & TabsProps'

Question

I'm creating a reusable tab view component using the latest ant design version. do I need to add Tabpane separately or does the latest ant design version have it with 'Tabs'?

my code :

import { Tabs } from "antd";
import type { TabsProps} from 'antd';

interface Props {
    defaultActiveKey?: string | undefined;   
    onChange?:() => void;    
    tabs?: TabsProps [] | undefined;
}

export default function TabView({onChange, defaultActiveKey, tabs}: Props) {

    return (
        <Tabs 
          onChange={onChange}
          defaultActiveKey={defaultActiveKey}
>         tabs={tabs}
        />    
    )
}

Error:

while adding tabs={tabs} I'm getting this type of error. I need to add TabItemType to tabs?: in props. any help to fix this error?

Answer 1

Based on this example from antd it looks like there are 2 errors in your example. The Tabs component takes items props instead of tabs. More importantly tabs prop should be typed as TabsProps["items"].

Now it works

import React from 'react';
import { Tabs } from "antd";
import type { TabsProps} from 'antd';

interface Props {
    defaultActiveKey?: string | undefined;   
    onChange?:() => void;    
    tabs?: TabsProps['items'];
}

export default function TabView({onChange, defaultActiveKey, tabs}: Props) {

    return (
        <Tabs 
          onChange={onChange}
          defaultActiveKey={defaultActiveKey}
          items={tabs}
        />    
    )
}

playground