diff --git a/src/components/List/RowContainer/index.tsx b/src/components/List/RowContainer/index.tsx
index a1b8f9a..6ff03eb 100644
--- a/src/components/List/RowContainer/index.tsx
+++ b/src/components/List/RowContainer/index.tsx
@@ -1,5 +1,7 @@
+import Blank from "../../fallback/Blank";
import { PropsWithChildren } from "react";
import { cn } from "../../../lib/utils";
+import { hasValidChildren } from "../../../lib/node.utils";
type RowContainerProps = {
row: number;
@@ -11,6 +13,10 @@ export default function RowContainer({
className,
children,
}: RowContainerProps) {
+ if (!hasValidChildren(children)) {
+ return ;
+ }
+
return (
{children}
);
diff --git a/src/components/List/index.stories.tsx b/src/components/List/index.stories.tsx
index be4f872..efe8bae 100644
--- a/src/components/List/index.stories.tsx
+++ b/src/components/List/index.stories.tsx
@@ -23,6 +23,20 @@ export const Default = {
),
};
+export const Blank = {
+ render: () => (
+
+
+
+
+ {no_books.map((book) => (
+
+ ))}
+
+
+ ),
+};
+
type BookItemType = {
id: string;
title: string;
@@ -105,6 +119,8 @@ const books: BookItemType[] = [
},
];
+const no_books: BookItemType[] = [];
+
const ListItemStory = ({ id, title, author, publisher, etc }: BookItemType) => {
return (
diff --git a/src/lib/node.spec.tsx b/src/lib/node.spec.tsx
new file mode 100644
index 0000000..d7b7e23
--- /dev/null
+++ b/src/lib/node.spec.tsx
@@ -0,0 +1,11 @@
+import { hasValidChildren } from "./node.utils";
+
+test("return true for valid children case", () => {
+ const children = [
Valid
, "Text"];
+ expect(hasValidChildren(children)).toBe(true);
+});
+
+test("return false for invalid or empty children case", () => {
+ const children = [null, undefined, false];
+ expect(hasValidChildren(children)).toBe(false);
+});
diff --git a/src/lib/node.utils.ts b/src/lib/node.utils.ts
new file mode 100644
index 0000000..9ea4706
--- /dev/null
+++ b/src/lib/node.utils.ts
@@ -0,0 +1,10 @@
+import React from "react";
+
+export function hasValidChildren(children: React.ReactNode): boolean {
+ return React.Children.toArray(children).some(
+ (child) =>
+ React.isValidElement(child) ||
+ typeof child === "string" ||
+ typeof child === "number"
+ );
+}
diff --git a/src/pages/user/List.tsx b/src/pages/user/List.tsx
index 30c3c86..f5b52b9 100644
--- a/src/pages/user/List.tsx
+++ b/src/pages/user/List.tsx
@@ -80,11 +80,9 @@ const UserListContent = () => {
- {!data.users || data.users.length === 0 ? (
-
- ) : (
- data.users.map((user) => )
- )}
+ {data.users.map((user) => (
+
+ ))}