1

I'm working on a React TS project and I'm trying to import the Material UI tabs https://material-ui.com/components/tabs/ The scrollable tabs specifcally.

I am taking the TS example for Tabs/Scrollable Tabs, however when I include it in my project as follows;

interface TabPanelProps {
 children?: React.ReactNode;
 index: any;
 value: any;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`scrollable-auto-tabpanel-${index}`}
      aria-labelledby={`scrollable-auto-tab-${index}`}
      {...other}
    >
  {value === index && (
    <Box p={3}>
      <Typography>{children}</Typography>
    </Box>
  )}
</div>
);
}

function a11yProps(index: any) {
 return {
   id: `scrollable-auto-tab-${index}`,
   'aria-controls': `scrollable-auto-tabpanel-${index}`,
   };
}

const useStyles = makeStyles((theme: Theme) => ({
 root: {
   flexGrow: 1,
   width: '100%',
   backgroundColor: theme.palette.background.paper,
 },
}));

export default function ScrollableTabsButtonAuto() {
const classes = useStyles();
const [value, setValue] = React.useState(0);

const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
  setValue(newValue);
};

 return (
   <div className={classes.root}>
     <AppBar position="static" color="default">
       <Tabs
      value={value}
      onChange={handleChange}
      indicatorColor="primary"
      textColor="primary"
      variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example"
    >
      <Tab label="Item One" {...a11yProps(0)} />
      <Tab label="Item Two" {...a11yProps(1)} />
      <Tab label="Item Three" {...a11yProps(2)} />
      <Tab label="Item Four" {...a11yProps(3)} />
      <Tab label="Item Five" {...a11yProps(4)} />
      <Tab label="Item Six" {...a11yProps(5)} />
      <Tab label="Item Seven" {...a11yProps(6)} />
    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Item One
  </TabPanel>
  <TabPanel value={value} index={1}>
    Item Two
  </TabPanel>
  <TabPanel value={value} index={2}>
    Item Three
  </TabPanel>
  <TabPanel value={value} index={3}>
    Item Four
  </TabPanel>
  <TabPanel value={value} index={4}>
    Item Five
  </TabPanel>
  <TabPanel value={value} index={5}>
    Item Six
  </TabPanel>
  <TabPanel value={value} index={6}>
    Item Seven
  </TabPanel>
</div>
);
}

However I keep getting the following error; enter image description here

I believe it relates to this line of code;

    const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
};

But I'm not sure what the problem is?

Thanks

MD9
  • 105
  • 2
  • 14

2 Answers2

0

Try to provide something like:

React.ChangeEvent<HTMLInputElement>
Ng Atom
  • 95
  • 7
0

Instead of working around this, I suppressed the TS error;

    rules: {
    '@typescript-eslint/ban-types': [
        'error',
        {
            extendDefaults: true,
            types: {
                '{}': false,
            },
        },
    ],
},
MD9
  • 105
  • 2
  • 14