diff --git a/src/async-data/AsyncView.tsx b/src/async-data/AsyncView.tsx index 0318ec2..82a9075 100644 --- a/src/async-data/AsyncView.tsx +++ b/src/async-data/AsyncView.tsx @@ -1,23 +1,22 @@ -import React from 'react' +import React, { ReactElement, ReactNode } from 'react' import { isFunction } from '../util' -type LoadingFunction = () => React.ReactElement | null -type SuccessFunction = (data: Data) => React.ReactElement | null -type ErrorFunction = ( - error: Error -) => React.ReactElement | null +type LoadingFunction = () => ReactNode +type SuccessFunction = (data: NonNullable) => ReactNode +type ErrorFunction = (error: NonNullable) => ReactNode type Props = { data?: Data error?: Error - renderLoading?: React.ReactNode | LoadingFunction - renderSuccess: React.ReactNode | SuccessFunction - renderError?: React.ReactNode | ErrorFunction + renderLoading?: ReactNode | LoadingFunction + renderSuccess: ReactNode | SuccessFunction + renderError?: ReactNode | ErrorFunction } const AsyncView = ( props: Props -): React.ReactElement | null => { + // The `ReactElement | null` type is for React 17 compatibility (see type FunctionComponent). With React 18 it can be a ReactNode and we can remove the Fragment wrappers. +): ReactElement | null => { const { data, error, @@ -25,16 +24,14 @@ const AsyncView = ( renderSuccess, renderError = null, } = props - if (error != null && error != undefined) { - return isFunction(renderError) ? renderError(error) : <>{renderError} - } else if (data != null && data != undefined) { - return isFunction(renderSuccess) ? ( - renderSuccess(data) - ) : ( - <>{renderSuccess} + if (error !== null && error !== undefined) { + return <>{isFunction(renderError) ? renderError(error) : renderError} + } else if (data !== null && data !== undefined) { + return ( + <>{isFunction(renderSuccess) ? renderSuccess(data) : renderSuccess} ) } else { - return isFunction(renderLoading) ? renderLoading() : <>{renderLoading} + return <>{isFunction(renderLoading) ? renderLoading() : renderLoading} } }