CODEWITHSUNDEEP
javascriptreactjstypescriptreact-hooksmaterial-ui
user19883277
user19883277

Reputation:

getting typescript error in react + mui while creating tabs?

I am creating custom hook of accordion component . I am getting below error

export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>>

here is my code https://codesandbox.io/s/epic-easley-ek3ev5?file=/src/App.tsx

export default function BasicTabs() {
  const { register, value } = useTabs();
  return (
    <Box sx={{ width: "100%" }}>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs {...register()} aria-label="basic tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </Box>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </Box>
  );

any suggestion

enter image description here

Upvotes: 1

Views: 396

Answers (1)

OneQ
OneQ

Reputation: 1487

In your useTabs you should change change React.ChangeEvent to React.SyntheticEvent as the signature of onChange is function(event: React.SyntheticEvent, value: any) => void in <Tabs /> : https://mui.com/material-ui/api/tabs/

Upvotes: 1

Related Questions