How to change Tab in Tabs programatically?

Robert_van_Gilst

When using the Tabs object, I would like to programatically change the tab that is visible.

I expected that I could update the value-property by setting this.showTab with an id of a Tab to change the tab that is shown. But this is not the case.

  <Tabs
    defaultValue="tab-1"
    value={this.showTab}
    type="tabs"
  >
    <Tab
      id="tab-1"
      title="First"
    >
      <Box
        className="p-5"
        width="100%"
      >
        Content 1
      </Box>
    </Tab>
    <Tab
      id="tab-2"
      title="Second"
    >
      <Box
        className="p-5"
        width="100%"
      >
        Content 2
      </Box>
    </Tab>
  </Tabs>
</div>

 

RobertScheitlin__GISP

The way I manage it is use a state.  so Tabs value property is set to a widget state called selTab and programmatically I set the widgets state for selTab and it works fine.