This content originally appeared on DEV Community and was authored by Danilo Gačević
Introducing the problem
Often when writing React applications, you are conditionally rendering some piece of UI based on some state.
This condition can be as simple as a binary boolean condition, or it can be a more complex ternary operator with multiple nested statements.
Let's imagine that we are calling an API using react-query and that we are displaying different UI depending on the API
call status.
const Example = () => {
const { data, status } = useQuery('users', fetchUsers)
return (
<Page>
{status === 'loading' ? (
<LoadingView />
) : status === 'error' ? (
<ErrorView />
) : (
<SuccessView data={data} />
)}
</Page>
)
}
These kinds of conditions can get hard to read sometimes.
Leveraging compound components and React.Children.map function, we can write a cleaner solution by moving condition logic into a wrapper component.
const Example = () => {
const { data, status } = useQuery('users', fetchUsers)
return (
<Page.Wrapper status={status}>
<Page.Loading>
<LoadingView />
</Page.Loading>
<Page.Error>
<ErrorView />
</Page.Error>
<Page.Success>
<SuccessView data={data} />
</Page.Success>
</Page.Wrapper>
)
}
Page component implementation
const PageWrapper = ({ children, status }) => {
const renderChildren = useCallback(() => {
return React.Children.map(children, (child) => {
if (child?.type === Screen.Loading && status === 'loading') {
return child
}
if (child?.type === Screen.Success && status === 'success') {
return child
}
return null
})
}, [children, status])
return <>{renderChildren()}</>
}
export const Page = {
Wrapper: PageWrapper,
Loading: ({ children }) => children,
Success: ({ children }) => children,
Error: ({ children }) => children,
}
Originally published at: https://www.danilothedev.com/blog/avoiding-large-ternary-statements-in-react
This content originally appeared on DEV Community and was authored by Danilo Gačević
Danilo Gačević | Sciencx (2022-07-27T16:22:37+00:00) Avoiding large ternary operator statements in React. Retrieved from https://www.scien.cx/2022/07/27/avoiding-large-ternary-operator-statements-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.