add select field option

src/App.js

@@ -6,6 +6,7 @@ import TextField from '@material-ui/core/TextField';
 import AddIcon from '@material-ui/icons/Add';
 import IconButton from '@material-ui/core/IconButton';
 import ReorderIcon from '@material-ui/icons/Reorder';
+import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
 
 
 import FormFieldText from './components/FormFieldText'
@@ -15,7 +16,7 @@ import FormFieldSelect from './components/FormFieldSelect'
 const useStyles = makeStyles(theme => ({
   menu: {
     width: theme.spacing(6),
-    height: theme.spacing(15),
+    minheight: theme.spacing(15),
     position: 'fixed',
     top: theme.spacing(10),
     left: '90%',
@@ -29,12 +30,22 @@ function App() {
   const [form, setForm] = useState([]);
 
   function addToFormQuestion() {
-    setForm([...form, {type: "question", question: ""}]);
+    setForm([...form, {type: "question", required: false, question: ""}]);
     console.log(form);
   }
 
   function addToFormSelect() {
-    setForm([...form, {type: "select", question: "", options: []}]);
+    setForm([...form, {type: "select", question: "", required: false, options: [""]}]);
+    console.log(form);
+  }
+
+  function addToFormRadio() {
+    
+  }
+
+  function addSelectOption(index) {
+    form[index].options.push("");
+    setForm([...form]);
     console.log(form);
   }
 
@@ -45,17 +56,29 @@ function App() {
     setForm([...form]);
   }
 
+  function removeSelectOption(index, idopt) {
+    form[index].options.splice(idopt, 1);
+    setForm([...form]);
+    console.log(form);
+  }
+
   function setTextField(value, index) {
     form[index].question = value;
     setForm([...form]);
     console.log(form);
   }
   
-  function setSelectField(value, index) {
+  function setSelectOption(value, index, idopt) {
+    form[index].options[idopt] = value;
+    setForm([...form]);
     console.log(form);
   }
 
-
+  function setRequiredField(index) {
+    form[index].required = !form[index].required;
+    setForm([...form]);
+    console.log(form);
+  }
 
   return (
     <div>
@@ -69,9 +92,14 @@ function App() {
         {
           form.map((x, index) => {
             if(x.type === "question")
-              return <FormFieldText question={x.question} idq={index} deleteFromForm={deleteFromForm} setTextField={setTextField}/>
+              return <FormFieldText question={x.question} idq={index} 
+                                    deleteFromForm={deleteFromForm} setTextField={setTextField} 
+                                    setRequiredField={setRequiredField}/>
             else if(x.type === "select")
-              return <FormFieldSelect question={x.question} idq={index} deleteFromForm={deleteFromForm} setTextField={setSelectField}/>
+              return <FormFieldSelect question={x.question} options={x.options} idq={index} 
+                                      deleteFromForm={deleteFromForm} addSelectOption={addSelectOption}
+                                      removeSelectOption={removeSelectOption} setSelectOption={setSelectOption} 
+                                      setTextField={setTextField} setRequiredField={setRequiredField} />
           })
         }
         
@@ -93,6 +121,9 @@ function App() {
             <IconButton aria-label="add select" onClick={addToFormSelect}>
               <ReorderIcon />
             </IconButton>
+            <IconButton aria-label="add radio" onClick={addToFormRadio}>
+              <RadioButtonCheckedIcon />
+            </IconButton>
           </Grid>
         </Grid>
       </Paper>