-
Notifications
You must be signed in to change notification settings - Fork 214
Description
Current behavior
Hi I'm using RC 0 and found that conditionally rendering tabs almost works. The below code is the closest I'm getting to rendering something conditionally.
Basically, I believe Container is expecting that 100% of the components children are Tabs.Tab. In reality, when conditionally rendering something, it still seems to be trying to use that child. For instance, I simplified some code for a sample of when it does not render:
{[].length > 0 && <Tabs.Tab name="Items">
<Posts posts={items} render={'items'} currentThing={thing} {...props} key="items" tabView={Tabs} />
</Tabs.Tab>}
This returns null is not an object
which is presumably because there's nothing there. So I tried this:
{[].length > 0 ? <Tabs.Tab name="Items">
<Posts posts={items} render={'items'} currentThing={thing} {...props} key="items" tabView={Tabs} />
</Tabs.Tab> : null}
Same thing, so I tried this:
{[].length > 0 ? <Tabs.Tab name="Items">
<Posts posts={items} render={'items'} currentThing={thing} {...props} key="items" tabView={Tabs} />
</Tabs.Tab> : <Tabs.Tab />}
And this doesn't spit out an error, so it seems as though Container can't handle null children right now. If it's not a Tabs.Tab component, it doesn't like it.
Expected behaviour
Instead of rejecting the missing component, it should gracefully ignore any unrendered components.
For what it's worth, <Tabs.Tab /> spits out a Tab, just with the name UNDEFINED. I don't think that's relevant here, but at least it gracefully survives.