Hide UL when empty object

[alexlovo]

Is there a way to hide the

if its an empty object {}? It shows the div and pushes the rest downward making it look awkward when hiding according to a variable

[abhijithvijayan]

can you create a sample codesandbox or attach the sample code here with screenshots @alexlovo

[alexlovo]

<Navigation
              activeItemId={location.pathname}
              onSelect={({ itemId }) => { history.push(itemId); }}
              items={[
              {
                  title: "Home",
                  itemId: "/",
                  elemBefore: () => <FontAwesomeIcon icon={faHome} />
                },
                isAuthorized ? {  //authorized is true or false
                  title: "Profile",
                  itemId: "/profile",
                  elemBefore: () => <FontAwesomeIcon icon={faUser} />,

                } : "",  // or adding an empty object {} instead of ""
            ]} />

Above is the sample, but its due to the div within the ul that it makes it look like something is there. Also it adds it because it iterates through each item regardless if its empty string ("") or empty object ({})

[abhijithvijayan]

@alexlovo this can be resolved with conditional spreading

https://codesandbox.io/s/react-minimal-side-navigation-example-forked-ojlec?file=/src/components/NavSidebar.jsx

[abhijithvijayan]

closing. feel free to re-open if it doesn't solve your issue

[alexlovo]

Yes that did work, I see what you mean now. Thank you for your quick response.