Use onChange in Material UI tabs handleChange function in React component

Question

Currently I have a certain navigation setup like this:

      <div>
        {letters?.map((letter) => {
          return (
            <button
              type="button"
              key={item.value}
              data-active={value === item.value}
              onClick={() => {
                if (onChange) {
                  onChange(item.value);
                }
              }}
            >
              {item.label}
            </button>
          );
        })}
      </div>

I want to change it, to use Material UI tabs.

I have the following:

const MyComponent = ({ firstLetters }: Props) => {
  const [value, setValue] = useState(0);

  const handleChange = (_event: React.ChangeEvent<{}>, newValue: string) => {
    console.warn(newValue);
    setValue(newValue);
  };

  return (
        <Tabs css={styles.tabsRoot} value={value} onChange={handleChange}>
          {firstLetters?.map((item) => {
            return (
              <Tab
                key={item.value}
                label={item.label}
                disableRipple
              />
            );
          })}
        </Tabs>
  )
};

How do I use onChange like my previous onClick function callback into the handleChange function?

Answer 1

According to the MUI docs, you should have value and onChange props in the Tabs component. So, you should remove the onClick prop from the Tab components, and add the aforementioned Tabs props like so:

<Tabs value={value} onChange={handleChange}>
  {letters?.map((item) => {
    return (
      <Tab
        key={item.value}
        label={item.label}
        disableRipple
        value={item.value}
      />
    );
  })}
</Tabs>