TabView/TabPanel: Can't have TabPanels in a JSX fragment

[kabalan-datapostie]

Describe the bug

Use case: want to conditionally render several TabPanels. To do this, the code would ideally look something like:

<TabView>
    <TabPanel header="Always here" />
    { myCondition && (<>
        <TabPanel header="Conditional panel 1" />
        <TabPanel header="Conditional panel 2" />
        <TabPanel header="Conditional panel 3" />
    </>) }
</TabView>

However in this case, the conditional panels don't show up, even when myCondition is true.

Reproducer

https://stackblitz.com/edit/vitejs-vite-gyvk7d?file=src%2FApp.tsx

PrimeReact version

10.4.0

React version

18.x

Language

ALL

Build / Runtime

Next.js

Browser(s)

Chrome 121

Steps to reproduce the behavior

See reproducer (can reproduce in Vite but also other builds / runtimes)

Expected behavior

TabPanels should show

[kabalan-datapostie]

Of course, a workaround is to do

{ myCondition && (<TabPanel header="Conditional panel 1" />)}
{ myCondition && (<TabPanel header="Conditional panel 2" />)}
{ myCondition && (<TabPanel header="Conditional panel 3" />)}

but this is not good practice and can quickly become difficult to maintain.

[melloware]

TabPanel should have a visible property so you can do this.

<TabPanel header="Conditional panel 1" visible={myCondition} />

[kabalan-datapostie]

Thanks @melloware ! I suppose that's pretty much the same as the workaround as we'd have to copy-paste myCondition several times, but it's a minor issue.

[melloware]

yeah it makes to me more readable code though and we have visible in other repeating components like MenuItem etc.