TabView: Conditionally render TabPanel under TabView

[maitrungduc1410]

Describe the bug

There's a bug when conditionally render TabPanel under TabView.

Let say:

<TabView>
  <TabPanel header="test 1">
    Hello World
  </TabPanel>
  <TabPanel header="test 2">
    Hello World
  </TabPanel>
  {someCondition && (
    <TabPanel header="test 3">
      Some content
    </TabPanel>
  )}
</TabView>

I figure out that when checking props.children for a Tabview, it returns false for the third tab, but PrimeReact doesn't filter this value and consider it's valid React Node then process rendering that node:

Reproducer

No response

PrimeReact version

9.1.1

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

Thanks for the report. Check out my PR. since the tab can be false i simple check that value first before anything else.

[maitrungduc1410]

Hi @melloware , I just found a bug regarding type error of the tab view:
after upgrading to "primereact": "^9.3.0", this 3 props are now required closeIcon, nextButton, prevButton. even If their type has undefined, but they're not annotated with ? that's why compiler doesn't understand that they're optional. Before it was fine without the 3 props

[maitrungduc1410]

When I provide the 3 props, it's fine

[maitrungduc1410]

This is error when I build my project (nextjs):

[melloware]

Yea the fix has been merged but not yet released. It should be in 9.3.1 you are using 9.3.0 right?

[maitrungduc1410]

Yes, I'm using 9.3.0