Type 'boolean' is not assignable to type 'CollectionElement<object>'.ts(2322)

[ayanonline]

{!loading && isLoggedIn && (
     <DropdownItem key="logout">Logout</DropdownItem>
)}

how can I solve this error

ERROR: Type 'false | Element' is not assignable to type 'CollectionElement'.Type 'boolean' is not assignable to type 'CollectionElement'.ts(2322)

[Harshal3110]

{!loading && isLoggedIn && (
     <DropdownItem key="logout">Logout</DropdownItem>
)}

how can I solve this error

ERROR: Type 'false | Element' is not assignable to type 'CollectionElement'.Type 'boolean' is not assignable to type 'CollectionElement'.ts(2322)

Please let me know if you found a solution for this. I am looking for the same.

[ayanonline]

{!loading && isLoggedIn && (
     <DropdownItem key="logout">Logout</DropdownItem>
)}

how can I solve this error

ERROR: Type 'false | Element' is not assignable to type 'CollectionElement'.Type 'boolean' is not assignable to type 'CollectionElement'.ts(2322)

Please let me know if you found a solution for this. I am looking for the same.

simply add hidden prop with you condition
<DropdownItem
hidden={!isLoggedIn }
key="logout"
textValue="Logout"
onClick={logoutHandler}
>
Logout

[Harshal3110]

The hidden property won't work as well. I have tried it and didn't work as expected.

[wingkwong]

If you are using collection-based component, you can't do in this way since empty / null children inside is not allowed. What you can do is add a hidden DropdownItem in a else case to make at least one child there.

[Harshal3110]

I just found the solution. Simply did this