How to add button (onclick event) on tabs but not switch the panes - semantic UI

Question

I want to add a button on top of list of tabs configured with semantic UI. Currently I have 2 tabs which can switch to panes when they are selected and I have third tab - I don't want it to switch when user click on it but rather dispatch an event (to expand the UI) or lets say a alert message. How to achieve this ?

Current code

example.js

import React from 'react'
import { Label, Menu, Tab } from 'semantic-ui-react'

const panes = [
  {
    menuItem: { key: 'users', icon: 'users', content: 'Users' },
    render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>,
  },
  {
    menuItem: (
      <Menu.Item key='messages'>
        Messages<Label>15</Label>
      </Menu.Item>
    ),
    render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>,
  },
]

const TabExampleCustomMenuItem = () => <Tab panes={panes} />

export default TabExampleCustomMenuItem

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Container, Header, List } from "semantic-ui-react";

import pkg from 'semantic-ui-react/package.json'
import Example from "./example";

const App = ({ children }) => (
  <Container style={{ margin: 20 }}>
    <Header as="h3">This example is powered by Semantic UI React {pkg.version} 😊</Header>
    <List bulleted>
      <List.Item
        as="a"
        content="💌 Official documentation"
        href="https://react.semantic-ui.com/"
        target="_blank"
      />
      <List.Item
        as="a"
        content="💡 StackOverflow"
        href="https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=frequent"
        target="_blank"
      />
    </List>

    {children}
  </Container>
);

// TODO: Switch to https://github.com/palmerhq/the-platform#stylesheet when it will be stable
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

ReactDOM.render(
  <App>
    <Example />
  </App>,
  document.getElementById("root")
);

Answer 1

You need to make use of controlled state to achieve similar result. Take a look at the following example:

example.js

import React, { useState } from "react";
import { Label, Menu, Tab } from "semantic-ui-react";

const panes = [
  {
    menuItem: { key: "users", icon: "users", content: "Users" },
    render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>
  },
  {
    menuItem: (
      <Menu.Item key="messages">
        Messages<Label>15</Label>
      </Menu.Item>
    ),
    render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>
  },
  {
    menuItem: <Menu.Item key="open">Open</Menu.Item>
  }
];

const TabExampleCustomMenuItem = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <Tab
      panes={panes}
      activeIndex={activeIndex}
      onTabChange={(e, data) => {
        if (data.activeIndex === 2) {
          alert(`You've clicked on the "Open" tab!`);
          return;
        }
        setActiveIndex(data.activeIndex);
      }}
    />
  );
};

export default TabExampleCustomMenuItem;