Tab does not render inside a react fragment

[zhiwang95]

Environment

• Package version(s): 3.42.0
• Operating System: macOS Catalina Version 10.15.7 (19H15)
• Browser name and version: Chrome Version 89.0.4389.90 (Official Build) (x86_64)

Code Sandbox

https://codesandbox.io/s/tab-issue-4u4kv?file=/src/App.js

Steps to reproduce

Check out the codesanbox example which renders a <Tab> component inside a react fragment.

Actual behavior

The <Tab> inside react fragment is not displayed.

Expected behavior

The <Tab> inside react fragment should be displayed.

[adidahiya]

Tabs expects Tab children only (the docs should do a better job of explaining this). What are you trying to accomplish by using a fragment?

[justinbhopper]

@adidahiya I ran into this same issue recently. A typical reason for a fragment is due to needing conditional sections, such as:

<Tabs>
  <Tab id="one" ... />
  <Tab id="two" ... />

  {isAdministrator && (
    <>
      <Tab id="three" ... />
      <Tab id="four" ... />
      ...
    </>
  )}
</Tabs>

Some workarounds would be to repeat the conditional, or to just render an array of Tab elements:

<Tabs>
  <Tab id="one" ... />
  <Tab id="two" ... />

  {isAdministrator && [
    <Tab key="three" id="three" ... />,
    <Tab key="four" id="four" ... />,
    ...
  ]}
</Tabs>

[colmex]

@adidahiya ran into the same issue.

@justinbhopper Workaround worked for me though! (i.e. rendering the array of Tab elements.