Using strings for tab pane index.

Feature Request

Problem description

When using the React Semantic UI tabs component, using the tab position as the index is sometimes unreliable as the new tabs are added to the tab group, the current position of the exisiting tabs are changed.

When the tab index changes, all the URLs defined across our application (eg: example.com/page?tab=2) are rendered broken i.e not navigating to the intended tab.

Therefore, it would be better if we can define a unique string value as the index for each tab pane, at the time of rendering the tab component. Then, no matter how the tab order is changed, we can refer to tabs as example.com/page?tab=general and make sure that the references to the tab pane remain as it is.

Proposed solution

A clear and concise description of what you want to happen. Add any considered drawbacks.

const [activeTabIndex, setActiveTabIndex] = useState<string>("general");

<Tab
    activeIndex={ activeTabIndex }
    defaultActiveIndex={ defaultActiveIndex }
    onTabChange={ handleTabChange }
    panes={ [
        {
          menuItem: <Menu.Item>General</Menu.Item>,
          render: () => <div>Tab General</div>
          index: "general"
        },
        {
          menuItem: <Menu.Item>Protocol</Menu.Item>,
          render: () => <div>Tab Protocol</div>
          index: "protocol"
        },
    ] }
/>

MVP

[Fork, update, and replace this pen if you can show the proposed solution]: https://codesandbox.io/s/2l3n74j9y

Semantic-Org / Semantic-UI-React