added conditional rendering

pwa/src/components/DiagnosisFields.json

@@ -61,7 +61,7 @@
             "text-input-title": ""
         },
         {
-            "name": "",
+            
             "group-title": "Eye",
             "group": [
                 "Ptergium",
@@ -106,7 +106,7 @@
             "text-input-title": ""
         },
         {
-            "name": "",
+            
             "group-title": "Intestinal",
             "group": [
                 "Gastritis",
@@ -146,7 +146,7 @@
             "text-input-title": ""
         },
         {
-            "name": "",
+            
             "group-title": "Cardiovascular",
             "group": [
                 "Hypertension",
@@ -209,7 +209,7 @@
             "text-input-type": "number"
         },
         {
-            "name": "",
+            
             "group-title": "Dermatological",
             "group": [
                 "Atopic Derm",
@@ -310,7 +310,7 @@
             "text-input-title": ""
         },
         {
-            "name": "",
+            
             "group-title": "",
             "group": [],
             "radio-buttons": {
@@ -320,7 +320,7 @@
             "text-input-title": "Other Diagnosis"
         },
         {
-            "name": "",
+            
             "group-title": "",
             "group": [],
             "radio-buttons": {

pwa/src/components/DiagnosisForm.tsx

@@ -4,7 +4,6 @@ import "../scss/DiagnosisForm.scss";
 import * as data from './DiagnosisFields.json';
 
 const CheckboxItem = Checkbox.CheckboxItem;
-const AgreeItem = Checkbox.AgreeItem;
 
 /*
 
@@ -28,19 +27,9 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format:
     ]
 }
 */
-// var diagnosisFields = require('./DiagnosisFields.json');
-// import * as data from './DiagnosisFields.json';
 
 var diagnosisFields = data.diagnoses;
 
-var fieldComponents = [];
-
-function createFields() {
-    diagnosisFields.forEach((diagnosisField) => {
-        // Create the corresponding element and push it to the array of fields
-    });
-}
-
 export default function Form(): ReactElement {
 
     return (
@@ -49,13 +38,16 @@ export default function Form(): ReactElement {
             <List renderHeader={() => 'CheckboxItem demo'}>
                 {diagnosisFields.map((i) => (
                     // TOOD: how do I add conditionals here?
-                    <CheckboxItem
-                      id={`${i.name.toLowerCase()}-button`}
-                      key={i.name}
-                      name="sex"
-                    >
-                      {i.name}
-                    </CheckboxItem>
+                    // i.e. `if (i.name != null){}`
+                    ((i.name == null) ? <></> : 
+                        <CheckboxItem
+                        id={`${i.name.toLowerCase()}-button`}
+                        key={i.name}
+                        name="sex"
+                        >
+                        {i.name}
+                        </CheckboxItem>
+                    )
                   ))}
             </List>
         </div>