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

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 ponent A (which is currently active in A Tab) the current or Active Tab should switch to B Tab. I am using Tabs ponent of Semantic UI for React. Any help would be much appreciated. Thanks.

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

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 ponent A (which is currently active in A Tab) the current or Active Tab should switch to B Tab. I am using Tabs ponent of Semantic UI for React. Any help would be much appreciated. Thanks.

• javascript
• reactjs
• semantic-ui
• semantic-ui-react

2 Answers 2

@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 ponent. What you want to do is directly control that state yourself. Out of the box, many SUIR ponents are handling the state themselves.

I put together a CodeSandbox example for you here showing how this would work with an internal ponent 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;

 (<any>$('.menu .item')).tab('change tab', 'tab-name');