Dynamic Update of tabs doesn't open a tab by default

[DakkeOG]

So I have a React Component with a tablist. If I make it Tab 1 and Tab 2 with Tabpanel 1 and 2 everything works fine. However, if I have an array called 'Types' that gets filled in the componentDidMount(), it re-renders my Tabs, but in my browser, none of the tabs is opened. Meaning, I have to click one in order to open it. adding defaultIndex={0} didn't help.

This is what I render;

`<Tabs defaultIndex={0} className={styles.tabs}>

    <TabList>
      {types.map(type => <Tab><div className={styles.tab}>{type.value}</div></Tab>)}
    </TabList>

    {types.map(type =>
      <TabPanel>
        { <p>{type.value}</p> }
      </TabPanel>
    )}

  </Tabs>`

[polarmutex]

I solved this by switching the mode to controlled and controlling the state in your own react component (using selectedIndex)

[WisetrackPeru]

Please could you share how you solved it I have the same problem

[zacharytyhacz]

I have a similar issue with using map.

In my case, each <Tab> and corresponding <TabPanel> are wrapped with an Auth Guard component which hides/shows the children based on permissions.

Due to the Auth Guard component being async to decide if to show children, the Tabs get rendered at different times messing up the tab indexing.

I really wish the resetIdCounter() function was client side, that's all I would need.