Skip to content

Conditionally rendered <Tabs.Tab> component showing null is not an object #102

@dan-fein

Description

@dan-fein

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions