Show hint if not animals have been added

maryhbb · Aug 26, 2023 · 14747c7 · 14747c7
1 parent 79ea604
commit 14747c7
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/src/components/List/index.jsx b/src/components/List/index.jsx
@@ -4,24 +4,29 @@ export default function List({ animals, onDeleteTag }) {
   return (
     <>
       <h2>Your animals:</h2>
-      <ul className="animal-list">
-        {animals.map((animal) => (
-          <li key={animal.id} className="animal-list__item">
-            <h3>{animal.name}</h3>
-            <span aria-label="emoji" className="animal-list__emoji">
-              {animal.emoji}
-            </span>
-            <button
-              className="animal-list__item-button"
-              type="button"
-              aria-label="delete list item"
-              onClick={() => onDeleteTag?.(animal)}
-            >
-              ✕
-            </button>
-          </li>
-        ))}
-      </ul>
+
+      {animals.length ? (
+        <ul className="animal-list">
+          {animals.map(animal => (
+            <li key={animal.id} className="animal-list__item">
+              <h3>{animal.name}</h3>
+              <span aria-label="emoji" className="animal-list__emoji">
+                {animal.emoji}
+              </span>
+              <button
+                className="animal-list__item-button"
+                type="button"
+                aria-label="delete list item"
+                onClick={() => onDeleteTag?.(animal)}
+              >
+                ✕
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        "You have no animals yet"
+      )}
     </>
   );
 }