Add title field

src/App.js

@@ -9,10 +9,12 @@ import ReorderIcon from '@material-ui/icons/Reorder';
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 
-import FormFieldText from './components/FormFieldText';
-import FormFieldSelect from './components/FormFieldSelect';
-import FormFieldRadio from './components/FormFieldRadio';
-import FormFieldCheckbox from './components/FormFieldCheckbox';
+import FormFieldText from './components/fieldsCreateForm/FormFieldText';
+import FormFieldSelect from './components/fieldsCreateForm/FormFieldSelect';
+import FormFieldRadio from './components/fieldsCreateForm/FormFieldRadio';
+import FormFieldCheckbox from './components/fieldsCreateForm/FormFieldCheckbox';
+import FormFieldTitle from './components/fieldsCreateForm/FormFieldTitle';
+
 
 const useStyles = makeStyles(theme => ({
   menu: {
@@ -28,7 +30,7 @@ const useStyles = makeStyles(theme => ({
 function App() {
   const classes = useStyles();
 
-  const [form, setForm] = useState([]);
+  const [form, setForm] = useState([{type: "title", title: "", description: ""}]);
 
   function addToFormQuestion() {
     setForm([...form, {type: "question", required: false, question: ""}]);
@@ -69,7 +71,7 @@ function App() {
     console.log(form);
   }
 
-  function setTextField(value, index) {
+  function setQuestionField(value, index) {
     form[index].question = value;
     setForm([...form]);
     console.log(form);
@@ -87,6 +89,18 @@ function App() {
     console.log(form);
   }
 
+  function setTitleField(value, index) {
+    form[index].title = value;
+    setForm([...form]);
+    console.log(form);
+  }
+
+  function setDescriptionField(value, index) {
+    form[index].description = value;
+    setForm([...form]);
+    console.log(form);
+  }
+
   return (
     <div>
       <Grid
@@ -95,32 +109,36 @@ function App() {
         alignItems="center"
         justify="center"
       >
-
         {
           form.map((x, index) => {
             if(x.type === "question")
               return <FormFieldText question={x.question} idq={index} 
-                                    deleteFromForm={deleteFromForm} setTextField={setTextField} 
-                                    setRequiredField={setRequiredField}/>
+                                    deleteFromForm={deleteFromForm} setQuestionField={setQuestionField} 
+                                    setRequiredField={setRequiredField} required={x.required}/>
             else if(x.type === "select")
               return <FormFieldSelect question={x.question} options={x.options} idq={index} 
                                       deleteFromForm={deleteFromForm} addSelectOption={addSelectOption}
                                       removeSelectOption={removeSelectOption} setSelectOption={setSelectOption} 
-                                      setTextField={setTextField} setRequiredField={setRequiredField} />
+                                      setQuestionField={setQuestionField} setRequiredField={setRequiredField} 
+                                      required={x.required} />
             else if(x.type === "radio")
             return <FormFieldRadio question={x.question} options={x.options} idq={index} 
                                     deleteFromForm={deleteFromForm} addSelectOption={addSelectOption}
                                     removeSelectOption={removeSelectOption} setSelectOption={setSelectOption} 
-                                    setTextField={setTextField} setRequiredField={setRequiredField} />
+                                    setQuestionField={setQuestionField} setRequiredField={setRequiredField} 
+                                    required={x.required} />
             else if(x.type === "checkbox")
               return <FormFieldCheckbox question={x.question} options={x.options} idq={index} 
                                     deleteFromForm={deleteFromForm} addSelectOption={addSelectOption}
                                     removeSelectOption={removeSelectOption} setSelectOption={setSelectOption} 
-                                    setTextField={setTextField} setRequiredField={setRequiredField} />
+                                    setQuestionField={setQuestionField} setRequiredField={setRequiredField} 
+                                    required={x.required} />
+            else if(x.type === "title")
+              return <FormFieldTitle question={x.question} idq={index} 
+                                    deleteFromForm={deleteFromForm} setTitleField={setTitleField} 
+                                    setDescriptionField={setDescriptionField}/>
 })
         }
-        
-
       </Grid>
     
       <Paper className={classes.menu}>