Material UI Tab - React - change active tab onclick

Question

I have tab component in react project.

I have 2 tabs. Tab 1 and Tab 2. when user click on Tab 1's contain to select I want to change active tab from Tab 1 to Tab 2.

For ex.

I have two tabs Tab1 and Tab2. Tab1 has contain test1 and test 2. Tab2 has contain test3 and test4.

when user click on test1 (Tab1 's contain) I want to change active tab from Tab1 to Tab2.

How can I do it.

Answer 1

Here is the simplest answer using hooks.

import { useState } from 'react';
..
const [tabState, setTabState] = useState(1);
...
  const handleTabs = (value) => {
    setTabState(value);
    return;
   }

let tabs_array = [<>{variable_with_contents_tab_1}</>, <>{tab_2_contents}</>];

Then in the render, you can provide the tab ui

<Paper className={classes.root}>
      <Tabs
        value={tabState}
        onChange={(event, value) => { handleTabs(value) }} 
        indicatorColor="primary"
        textColor="primary"
        centered
      >
        <Tab value={1} label='Tab1'>
        </Tab>
        <Tab value={2} label="Tab2" />
      </Tabs>
    </Paper>
    <Paper>
        {tabs_array[tabState-1]}
    </Paper>

Answer 2

Faced with problem: onChange in Tabs hasn't worked, cause I forgot add {...other} when destructuring props and affected material-ui's needed props. Spent two hours to fix it =/

const Tab = ({myPersonalProps, ...other}) => {.... return <MaterialTab {...other}>}

Answer 3

I've taken the Basic Tabs example from the material-ui doc and adapted it to do what you describe in your example.

Notice that in the original Basic Tabs example, the code tracks which tab is active using by setting a value property in this.state. In order to switch tabs when an item inside Tab One is clicked, all you need to do is update the value property when something is clicked inside Tab One. I indicated with a comment where that happens below.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Typography from 'material-ui/Typography';

function TabContainer(props) {
  return (
    <Typography {...props} component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    marginTop: theme.spacing.unit * 3,
    backgroundColor: theme.palette.background.paper,
  },
});

class BasicTabs extends React.Component {
  state = {
    activeTabIndex: 0,
  };

  handleChange = (event, value) => {
    this.setState({ activeTabIndex: value });
  };

  render() {
    const { classes } = this.props;
    const { activeTabIndex } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={activeTabIndex} onChange={this.handleChange}>
            <Tab label="Tab One" />
            <Tab label="Tab Two" />
          </Tabs>
        </AppBar>
        {
          activeTabIndex === 0 &&
          // When the user clicks on Test One or Test Two, update the state
          // to display Tab 2
          <div onClick={() => this.setState({ activeTabIndex: 1 })}>
            <TabContainer >
              Test One
            </TabContainer>
            <TabContainer>
              Test Two
            </TabContainer>
          </div>
        }
        {
          activeTabIndex === 1 &&
          <div>
            <TabContainer>
              Test Three
            </TabContainer>
            <TabContainer>
              Test Four
            </TabContainer>
          </div>
        }
      </div>
    );
  }
}

BasicTabs.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(BasicTabs);