Novu•2y ago

EmptyState prop on PopoverNoificationCenter

If I pass a function to the notification center like

<PopoverNotificationCenter
    emptyState={() => <LookingGlassIcon/>}
/>

<PopoverNotificationCenter
    emptyState={() => <LookingGlassIcon/>}
/>

It will pass type checking but wont render on screen. The console also shows this error

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it

If I pass it

<PopoverNotificationCenter
    emptyState={<LookingGlassIcon/>}
/>

<PopoverNotificationCenter
    emptyState={<LookingGlassIcon/>}
/>

It will render but fail the type check. Should the interface be emptyState?: JSX.Element; instead of emptyState?: () => JSX.Element; ? Or am I doing something wrong (header and footer prop have the same signature)

4 Replies

Pawan Jain•2y ago

I tried to reproduce this. This is a strange behaviour. same thing is working with footer and header but not with empty state @Engineering

DavidSouthmountain•2y ago

Yeas I think it should be <LookingGlassIcon/> and the type is wrong I suggest we change how we render it to be () => JSX.Element to be consistent with the other ones we have

Gali Baum•2y ago

Yes, saw that as well !issu !issue

Linear•2y ago

Issue NV-1675 created.

NV-1675 - EmptyState prop on PopoverNoificationCenter

Status

Triage

Engineering

Gaming

Programming

EmptyState prop on PopoverNoificationCenter