How to switch between the tabs with an on-Click from a button as well as by clicking the tab menu?

Question

I have a component MainContent which shows a table that has some list of items. It also renders a collapse section with Tabs. The table has a column that shows some actions (edit, view, etc) which are shown by Icon (Semantic-UI React). I want to switch between these tabs with on-Click on these icons as well as by clicking the tab menus. So currently I'm only able to switch with onClick these icons.

Current implementation:

const MainContent = () => {
  const [activeIndex, setactiveIndex] = useState(0);
  const handleClickView = (expand, tab) => {
    setActiveKey(expand);
    // switching between parent and usecase
    if (tab == "USECASE") {
      setactiveIndex(0);
    } else {
      setactiveIndex(1);
    }
   ....
   ....
  };
  
  const routeContents = (route, index) => {
    return (
      <tr key={index}>
        .... 
        ....
        ....
        <td>
          <Icon
            link
            name="eye"
            onClick={(event) => handleClickView("0", "PARENT", event)}
          />
          <Icon
            link
            name="edit"
            onClick={(event) => handleClickView("0", "PARENT", event)}
          />
          <Icon link name="delete" />
        </td>
      </tr>
    );
  };

  // Iterating through child-mock...
  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          ....
          ....
          ....
          <td>
            <Icon
              link
              name="eye"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon
              link
              name="edit"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon link name="delete" />
          </td>
        </tr>
      ....
      ....
      </>
    ) : (
      ....
      ....
      ....
    );
  };

  return (
    <div>
        <AddMock
        activeIndex={activeIndex}
      />
      <div className="container-fluid">
        ....
        ....
        ....
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            ....
                            ....
                            ....
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                   .....
                   ....
                   ...
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;

this is AddMock.js

const AddMock = forwardRef((props, ref) => {
 ....
 ....
  return (
    <div className="row" ref={ref}>
      <Accordion>
        .....
        .....
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container>
                <TabContent activeIndex={props.activeIndex} />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
});

export default AddMock;

this is TabContent

const panes = [
  {
    menuItem: "Parent",
    ....
  },
  {
    menuItem: "Usecase",
    ....
    },
  },
];
const TabContent = (props) => (
  <Tab
    menu={{ secondary: true, pointing: true }}
    panes={panes}
    renderActiveOnly={true}
    activeIndex={props.activeIndex}
  />
);

export default TabContent;

So currently with this workaround, I'm only able to switch to tabs by clicking icons in the table. I want to switch to another tab by clicking it as well. Since activeIndex is set a value, another tab is disabled. Any help is much appreciated.

Answer 1

You follow the step here

Step 1:

Add a another function 'handleItemClick' which contain one parameter id/index of tab. like

handleItemClick = (id) => this.setState({ activeIndex: id });

Step 2:

Attach click event in your icon element with item index/id like

<Icon
  link
  name="eye"
  onClick={() => this.handleItemClick(1)}
/>

or follow this link codesandbox.io

Hope to solve your problem.

Thanks