How to manage interface states?

Question

React

A question. What is the way to handle all possible interface states?
I mean the state:
isLoading
isSuccess
isEmpty

Plus, I always add the errorText state here in case of an error.

How to process all this correctly? At the moment I'm just arranging the if string.

Maybe there is some pattern or something else for this case?

Answer 1

You can use a nested ternary. You can't imagine anything more compact anyway.

return isEmpty ? <Empty /> : isLoading ? <Loading /> : errorText ? <Error text={errorText} /> : <ShowSuccessData ... />

Answer 2

[state, setState] = useState(false);


  return (
    {state && <Component/>}
  )