Идеальный вариант, создать для этих задач компонент:
function Block({
children,
isLoading,
isError,
isEmpty,
emptyText,
fetch,
}) {
const showPreloader = isLoading && !isError;
const allDataIsReady = !isLoading && !isError;
const showEmptyText = allDataIsReady && isEmpty && emptyText;
return (
<Wrapper>
{showPreloader && <Preloader />}
{isError && <TryAgain fetch={fetch} />}
{showEmptyText && <Empty>{emptyText}</Empty>}
{allDataIsReady && children}
</Wrapper>
);
}
И использовать его в коде так:
render() {
const { isLoading, isError, orderList } = this.props;
return (
<Block
isLoading={isLoading}
isError={isError}
isEmpty={!ordersList.length}
fetch={this.fetchOrdersList}
emptyText="You don't have any orders."
>
{ordersList.map(order => <Order key={order.id} order={order} />}
</Block>
)
}
Название служебных дочерних компонентов компонента
Block условные, но думаю суть их задач передают.
