Not able to switch between tabs

[VijayAtDure]

<Tab
    dataTest="dhis2-uicore-tab"
    icon={<FontAwesomeIcon icon={faFileSignature} />}
    className={classes.formtabs}
    onClick={onClick}
    selected
>
    {Tab1}
</Tab>
<Tab
    dataTest="dhis2-uicore-tab"
    icon={<FontAwesomeIcon icon={faFileSignature} />}
    className={classes.formtabs}
    onClick={onClick}
>
    {Tab2}
</Tab>

I'm new to this, so I'm not able to switch between tabs. I tried calling onClick function but in response all the value for key are either empty or null.

Can someone help me for the following:

1. Switch tabs and on change selected attribute should change and should be assigned to click tabs.
2. Change content section as per the clicked tab or event.

[Mohammer5]

Hi there!

The onClick callback does not contain any information about which Tab has been clicked, so you need to do that manually. You can supply an anonymous function to the onClick prop which will handle what you're looking for:

<Tab
  // ... your other props
  onClick={() => {
    // You could supply a hard-coded constant like for example "FIRST_TAB"
    // Or you can supply an index, if you create the tabs from an array of items
    onClick(/* Pass the relevant information to the callback */)
  }}
>
  Tab content
</Tab>

I will close this issue as this answers your question. If you have more questions, please don't hesitate to reply to this issue.