semantic cards functioning properly

package.json

@@ -11,6 +11,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "semantic-ui-card": "^2.3.1",
+    "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.1.2",
     "web-vitals": "^2.1.4"
   },

src/components/RecipeCard.js

@@ -14,8 +14,7 @@ function RecipeCard({ recipe, onRecDetails }) {
 
 
     return (
-        <div className="ui link cards">
-            <Card className="ui cards" >
+            <Card>
                 <div className="image" >
                     <img src={recipe.img} alt={recipe.name} />
                 </div>
@@ -31,7 +30,6 @@ function RecipeCard({ recipe, onRecDetails }) {
                     </span>
                 </div>
             </Card>
-        </div>
     )
 
 };

src/components/RecipeContainer.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Card } from "semantic-ui-react";
 import RecipeCard from "./RecipeCard"
 
 function RecipeContainer({ recipes, onRecDetails }) {
@@ -10,12 +11,21 @@ function RecipeContainer({ recipes, onRecDetails }) {
     //         )
     //     })
     // )
-    const renderRecipes = Object.keys(recipes).map((recipeId) => (
-        <RecipeCard key={recipeId} recipe={recipeId} onRecDetails={onRecDetails} />
-    ))
+    // const renderRecipes = Object.keys(recipes).map((recipe) => (
+    //         <Card.Group>
+    //             <RecipeCard key={recipe.id} recipe={recipe} onRecDetails={onRecDetails} />
+    //         </Card.Group>
+    // ))
 
     return (
-        <ul>{renderRecipes}</ul>
+        <div className="ui centered link cards" id="rec-container" >
+            {recipes.map((recipe) => {
+                return (
+                    <RecipeCard key={recipe.id} recipe={recipe} onRecDetails={onRecDetails} />
+                )
+            })}
+        </div>
+
     )
 
 

src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#rec-container {
+  margin-top: 20px;
+}
+