Error when conditionally generating Tabs and TabPanels

[sgronblo]

If you use a ternary condition to return a null instead of a Tab react-tabs you get a "Uncaught TypeError: Cannot read property 'ref' of null".

Example

<div>
  <Tabs>
    { shouldShowTabA ? <Tab>Tab A</Tab> : null }
    { shouldShowTabB ? <Tab>Tab B</Tab> : null }
  </Tabs>
  { shouldShowTabA ? <TabPanel>{contentForA}</TabPanel> : null }
  { shouldShowTabB ? <TabPanel>{contentForB}</TabPanel> : null }
</div>

The assumption here is of course that at least one of the tabs will be displayed. I am not sure what will happen if you don't define any Tab elements.

[mauricesvay]

I get a similar error when I try to add/remove tabs on the fly. Is there a way to do that?

[mzabriskie]

This was indeed an error where we were trying to render null. It is working now, and I have added a new example that you can check out https://github.com/rackt/react-tabs/blob/master/examples/conditional/app.js

[sgronblo]

Thanks a lot! Any estimate on when you will publish a new version including this fix. This is off-topic, but it would be great if we could get the className prop evaluation for components as well. I seem to remember the disabling of the basic styles having been added already too.

[mzabriskie]

Just released.

[mauricesvay]

Awesome 👍

[wmertens]

This still breaks if you do something like

<div>
  <Tabs>
    { shouldShowTabA ? <Tab>Tab A</Tab> : null }
    { text && <Tab>Tab B</Tab>}
  </Tabs>
  { shouldShowTabA ? <TabPanel>{contentForA}</TabPanel> : null }
  { text && <TabPanel>{text}</TabPanel> }
</div>

IOW if the child is falsy, like an empty string, react-tabs still crashes. How about replacing https://github.com/reactjs/react-tabs/blob/master/src/components/Tabs.js#L186 with if (!child)?