Skip to content

EuiNavDrawerGroup is too strict about what can be passed in as children #2709

@myasonik

Description

@myasonik

This makes it difficult to conditionally render segments of the nav.

Two things which to better enable conditional rendering to be easier:

  • Allowing React.Fragment>
  • Allowing undefined

Made-up code example of what I'm trying to accomplish:

function conditionRender() {
	if (condition) return (<EuiNavDrawerGroup listItems={linksTwo} />);

	// All nested navs in here are broken 👇
	return (<>
		<EuiNavDrawerGroup listItems={linksTwo} />
		<EuiNavDrawerGroup listItems={linksThree} />
	</>);
}

const render = () => (
	<EuiNavDrawer>
		<EuiNavDrawerGroup listItems={linksOne} />
		{this.conditionalRender()}
	</EuiNavDrawer>);
);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions