CODEWITHSUNDEEP
reactjstypescriptmaterial-uitabs
Angryjames
Angryjames

Reputation: 77

React - TypeScript - MUI Tabs - Getting an Overload Error

I am trying to create a component using MUI Tabs,

<Box>
    <Tabs value={value} onChange={handleChange} variant='fullWidth'>
        {RoomTabs.map((tab, index) => (
            <Tab label={tab.label} value={tab.id} key={index} icon={tab.icon}/>
        ))}
    </Tabs>
    
</Box>

RoomTabs is an array of objects (with a "custom" Type)

VSCode is warning me, and when I Save (Local Server), the page pops up with the following error.

ERROR in src/pages/system/rooms/Room.tsx:19:67 TS2769: No overload matches this call. Overload 1 of 3, '(props: { href: string; } & { children?: null | undefined; classes?: Partial | undefined; disabled?: boolean | undefined; disableFocusRipple?: boolean | undefined; ... 5 more ...; wrapped?: boolean | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error. Type 'ReactNode' is not assignable to type 'string | ReactElement<any, string | JSXElementConstructor> | undefined'. Type 'null' is not assignable to type 'string | ReactElement<any, string | JSXElementConstructor> | undefined'. Overload 2 of 3, '(props: { component: ElementType; } & { children?: null | undefined; classes?: Partial | undefined; disabled?: boolean | undefined; ... 6 more ...; wrapped?: boolean | undefined; } & Omit<...> & CommonProps & Omit<...>): Element | null', gave the following error. Type 'ReactNode' is not assignable to type 'string | ReactElement<any, string | JSXElementConstructor> | undefined'. Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<TabTypeMap<{}, "div">>>): Element | null', gave the following error. Type 'ReactNode' is not assignable to type 'string | ReactElement<any, string | JSXElementConstructor> | undefined'. 17 | 18 | {RoomTabs.map((tab, index) => ( 19 | | ^^^^ 20 | ))} 21 |

I am trying to figure out how to get around this. I assume it is because there is a potential for "tab.icon" to be undefined.

When I clear the error in the browser, my icons and tabs work as expected.

Just trying to better understand what might be happening.

Any thoughts?

Upvotes: 0

Views: 196

Answers (1)

Angryjames
Angryjames

Reputation: 77

Well, it looks like the Tab Icon element does not want a ReactNode, but a ReactElement.

Not really sure what the difference is, but I will go down the path to find out.

Upvotes: 0

Related Questions