Best way to handle many possible components to render?

I just ask this on twitter, but what would be your approach to it, imagine: U have a page, that calls a hooks, that loads your data, ok. The return of the hooks is:
const {error, isLoading, data} = useGetMyData():
const {error, isLoading, data} = useGetMyData():
Now if some error happens i show one component, if islaoding u show another. If data is data.x u show <ComponentX/> if is data.y u show <ComponentY /> basically u have 4 possibly component to be showed in your page
3 Replies
xel
xel15mo ago
if (error) {
return <SomeComponent />
} else if...
if (error) {
return <SomeComponent />
} else if...
just like this
Augustos
Augustos15mo ago
oh yeah, but i mean, inside another component, i'm searching better way than using many
{X ?? <></>}
{ Y && <></> }
{ foo && bar ? <></> : <></> }
{X ?? <></>}
{ Y && <></> }
{ foo && bar ? <></> : <></> }
and etc
xel
xel15mo ago
hmm not sure what you're looking for, these are the ways to do conditional rendering if else / switch / && etc possibly consider refactoring your components if viable
Want results from more Discord servers?
Add your server