1

I am a beginner react user, and am trying to incorporate simple swipeable tabs for mobile viewer.(similar to the tab on the instagram profile)

I found react-swipeable-views and Material UI and tried using it.

It seems like it's working if I click on the Tab menu but the problem is that the tab menu/index doesn't get updated when I swipe the tab body.

If anyone knows better way to do this or to make this work, please share your wisdom with me

import { useState } from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import SwipeableViews from "react-swipeable-views";

const TabContent = (props) => {
  const [index, setIndex] = useState(0);

  return (
    <>
      <Tabs value={index} fullWidth onChange={()=>setIndex(value)}>
        <Tab label="tab 1" />
        <Tab label="tab 2" />
        <Tab label="tab 3" />
      </Tabs>

      <SwipeableViews
        index={index}
        onChangeIndex={() => setIndex(index)}
        enableMouseEvents
        animateHeight
      >
            <div>tab 1</div>
            <div>tab 2</div>
            <div>tab 3</div>
     </SwipeableViews>
    </>

)

export default TabContent;

Thank you!

MiMi
  • 85
  • 1
  • 2
  • 8

1 Answers1

3
onChangeIndex={index => setIndex(index)}

otherwise you're changing to index from your state, which is current index :)

dbuchet
  • 1,561
  • 1
  • 5
  • 7