Change Semantic UI Tabs on click of some button in other component

Question

I have the following code in my component, where A nad B are my other components and SomeComponent is where I am rendering A and B along with the TabExampleSecondaryPointing component.

import { Tab } from 'semantic-ui-react';

const panes = [
  { menuItem: 'A', render: () => <Tab.Pane attached={false}> <A/> </Tab.Pane> },
  { menuItem: 'B', render: () => <Tab.Pane attached={false} > <B/> </Tab.Pane> },
]

const TabExampleSecondaryPointing = () => (
   <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
)

class SomeComponent extends Component {
  render() {
      return (
        <div>
           <TabExampleSecondaryPointing />
        </div>
      );
  }
}

What I want to do is when I click some button inside of component A (which is currently active in A Tab) the current or Active Tab should switch to B Tab. I am using Tabs component of Semantic UI for React. Any help would be much appreciated. Thanks.

Answer 1

@Vibhor in the interest of someone else landing on this answer, and perhaps helping you to improve your solution, I would encourage you to take a look at the controlled examples for Tabs on the SUIR documentation.

What you have proposed and implemented as your solution is definitely a workaround. You are using the DOM to simulate a click event to change the auto controlled state of that component. What you want to do is directly control that state yourself. Out of the box, many SUIR components are handling the state themselves.

I put together a CodeSandbox example for you here showing how this would work with an internal component state extending upon the example in the SUIR docs:

https://codesandbox.io/s/k9ozm3w5n7

import React, { Component } from "react";
import { render } from "react-dom";
import { Button, Container, Tab } from "semantic-ui-react";

class TabExampleActiveIndex extends Component {
  state = { activeIndex: 1 };

  handleRangeChange = e => this.setState({ activeIndex: e.target.value });
  handleTabChange = (e, { activeIndex }) => this.setState({ activeIndex });

  render() {
    const { activeIndex } = this.state;

    const panes = [
      {
        menuItem: "Tab 1",
        render: () => (
          <Tab.Pane>
            Tab 1 Content{" "}
            <Button
              content="Tab 2"
              onClick={this.handleRangeChange}
              value={1}
            />
          </Tab.Pane>
        )
      },
      {
        menuItem: "Tab 2",
        render: () => (
          <Tab.Pane>
            Tab 2 Content{" "}
            <Button
              content="Tab 3"
              onClick={this.handleRangeChange}
              value={2}
            />
          </Tab.Pane>
        )
      },
      {
        menuItem: "Tab 3",
        render: () => (
          <Tab.Pane>
            Tab 3 Content{" "}
            <Button
              content="Tab 1"
              onClick={this.handleRangeChange}
              value={0}
            />
          </Tab.Pane>
        )
      }
    ];

    return (
      <div>
        <div>activeIndex: {activeIndex}</div>
        <input
          type="range"
          max="2"
          value={activeIndex}
          onChange={this.handleRangeChange}
        />
        <Tab
          panes={panes}
          activeIndex={activeIndex}
          onTabChange={this.handleTabChange}
        />
      </div>
    );
  }
}

export default TabExampleActiveIndex;