if the data is null it does not render the card

Samasource · Sep 28, 2023 · 79d1646 · 79d1646
1 parent fe08c77
commit 79d1646
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/recipes/3d-cuboid-recipe-index.js b/recipes/3d-cuboid-recipe-index.js
@@ -50,15 +50,15 @@ const prettier = (code) => {
 const Cuboid3DRecipe = () => {
     const cardsData = [
         cuboid_3D,
-        {},
-        {}
+        null,
+        null
     ]
     React.useEffect(() => {
         snippets = []
     }
     ), [currentData];
     const [currentData] = React.useState({})
-    const renderCards = cardsData.map((data, index) => <RecipeCard key={index} title={data.title} description={data.description} data={data} modalId={`modal${index}`} />)
+    const renderCards = cardsData.map((data, index) => !!data ? <RecipeCard key={index} title={data.title} description={data.description} data={data} modalId={`modal${index}`} /> : null)
     return (
         <div className="container overflow-hidden" >
             <div class="row gy-5">

diff --git a/recipes/fused-annotation-recipe-index.js b/recipes/fused-annotation-recipe-index.js
@@ -49,16 +49,16 @@ const prettier = (code) => {
 
 const FusedAnnotationRecipes = () => {
     const cardsData = [
-        {},
-        {},
+        null,
+        null,
         fused_annotation
     ]
     React.useEffect(() => {
         snippets = []
     }
     ), [currentData];
     const [currentData] = React.useState({})
-    const renderCards = cardsData.map((data, index) => <RecipeCard key={index} title={data.title} description={data.description} data={data} modalId={`modal${index}`} />)
+    const renderCards = cardsData.map((data, index) => !!data ? <RecipeCard key={index} title={data.title} description={data.description} data={data} modalId={`modal${index}`} /> : null)
     return (
         <div className="container overflow-hidden" >
             <div class="row gy-5">

diff --git a/recipes/orthographic-shapes-recipe-index.js b/recipes/orthographic-shapes-recipe-index.js
@@ -49,16 +49,16 @@ const prettier = (code) => {
 
 const OrthographicShapesRecipes = () => {
     const cardsData = [
-        {},
+        null,
         orthographic_shapes,
-        {}
+        null
     ]
     React.useEffect(() => {
         snippets = []
     }
     ), [currentData];
     const [currentData] = React.useState({})
-    const renderCards = cardsData.map((data, index) => <RecipeCard key={index} title={data.title} description={data.description} data={data} modalId={`modal${index}`} />)
+    const renderCards = cardsData.map((data, index) => !!data ? <RecipeCard key={index} title={data.title} description={data.description} data={data} modalId={`modal${index}`} /> : null)
     return (
         <div className="container overflow-hidden" >
             <div class="row gy-5">
@@ -256,7 +256,10 @@ const RecipeCard = ({ data, modalId }) => {
                     <Modal currentData={data} modalId={modalId} />
                 </div>
             </div>
-        </div>)
+        </div>
+    )
+
+
 }