Kevin Powell - Community•13mo ago

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•13mo ago

if (error) {
  return <SomeComponent />
} else if...

if (error) {
  return <SomeComponent />
} else if...

just like this

Augustos•13mo 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•13mo 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

Gaming

Programming

Best way to handle many possible components to render?