completed update components by typeAnswer

src/assets/styles/viewForm.module.scss

@@ -16,7 +16,6 @@
     overflow-y: auto;
     width: 70%;
     height: 80%;
-    // box-shadow: 0 -1px 5px 1px rgb(200, 200, 200);
     border: 2px solid rgb(220, 220, 220);
     &::-webkit-scrollbar {
         width: 7px;
@@ -33,6 +32,15 @@
         justify-content: space-between;
         align-items: center;
         padding: 10px 20px;
+        &__title {
+            font-size: 17px;
+            font-weight: bold;
+            font-family: "Montserrat", sans-serif;
+            color: rgb(100, 100, 100);
+        }
+        &__id {
+
+        }
     }
     &__content {
         width: 100%;
@@ -55,7 +63,6 @@
 }
 
 .footer {
-    // box-shadow: 0 1px 5px 1px rgb(220, 220, 220);
     width: 70%;
     height: 10%;
     display: flex;

src/components/GeneratingFormFields.jsx

@@ -15,7 +15,6 @@ const GeneratingFormFields = ({newForm, listTypeAnswer, answers, updateAnswersFo
                             postfix: i, 
                             optionAnswer: item.optionAnswer, 
                             answers: answers ? answers : false, 
-                            id: i,
                             updateAnswersForm: updateAnswersForm ? updateAnswersForm : false
                         })
                     }

src/components/typeAnswer/DropDownList.jsx

@@ -1,18 +1,14 @@
 import React, { useState } from "react";
 import classes from "../../assets/styles/components/typeAnswer/dropDownList.module.scss"
 
-const DropDownList = (props) => {
+const DropDownList = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     return (
         <div className={classes.main}>
-            {/* <select value={value} onChange={e => setValue(e.target.value)}>
-                {props.answers.map((item, i) => 
-                    <option value={item.id} key={i}>{item.text}</option>
-                )}
-            </select> */}
             <select 
-                value={props.answers ? props.answers[props.id].answer : ""} 
+                value={answers ? answers[postfix].answer : ""} 
-                onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}>
+                onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
-                {props.optionAnswer.map((item, i) => 
+            >
+                {optionAnswer.map((item, i) => 
                     <option value={item.id} key={i}>{item.text}</option>
                 )}
             </select>

src/components/typeAnswer/InputDate.jsx

@@ -1,10 +1,14 @@
 import React from "react";
 import classes from "../../assets/styles/components/typeAnswer/inputDate.module.scss"
 
-const InputDate = (props) => {
+const InputDate = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     return (
         <div className={classes.main}>
-            <input type="datetime-local" />
+            <input 
+                type="datetime-local" 
+                value={answers ? answers[postfix].answer : ""} 
+                onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
+            />
         </div>
     )
 }

src/components/typeAnswer/InputFile.jsx

@@ -1,17 +1,16 @@
 import React, { useState } from "react";
 import classes from "../../assets/styles/components/typeAnswer/inputFile.module.scss"
 
-const InputFile = (props) => {
+const InputFile = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     return (
         <div className={classes.main}>
-            <input 
+            <input
-                // id={`file_${props.postfix}`}
                 type="file" 
                 multiple
                 accept="image/*,image/jpeg,video/mp4,video/x-m4v,video/*" 
                 className={classes.myModal__dialog__content__body__answer__file}
-                // value={file}
+                value={answers ? answers[postfix].answer : ""} 
-                // onChange={event => setFile(event.target.value)}
+                onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
             ></input> 
         </div>
     )

src/components/typeAnswer/InputMultipleRadio.jsx

@@ -1,40 +1,40 @@
 import React from "react";
 import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss"
 
-const InputMultipleRadio = (props) => {
+const InputMultipleRadio = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     function checkRadio(i) {
-        if (props.answers[props.id].answer) {
+        if (answers[postfix].answer) {
-            return props.answers[props.id].answer.some(item => item === Number(i))
+            return answers[postfix].answer.some(item => item === Number(i))
         }
         return false
     }
 
     function updateStateCheckbox(i) {
-        if (props.updateAnswersForm) {
+        if (updateAnswersForm) {
-            if (props.answers[props.id].answer.some((item) => item === Number(i))) {
+            if (answers[postfix].answer.some((item) => item === Number(i))) {
-                props.answers[props.id].answer.splice(props.answers[props.id].answer.indexOf(i), 1)
+                answers[postfix].answer.splice(answers[postfix].answer.indexOf(i), 1)
             }
             else {
-                props.answers[props.id].answer.push(i)
+                answers[postfix].answer.push(i)
             }
-            props.updateAnswersForm(props.answers[props.id].answer, props.id)
+            updateAnswersForm(answers[postfix].answer, postfix)
         }            
     }
 
     return (
         <div className={classes.main}>
-            {props.optionAnswer.map((item, i) => 
+            {optionAnswer.map((item, i) => 
                 <div class="form-check" key={i}>
                     <input 
                         class="form-check-input" 
                         type="checkbox" 
-                        name={`inputMultiple_${props.postfix}`} 
+                        name={`inputMultiple_${postfix}`} 
-                        id={`inputMultiple_${props.postfix}`}
+                        id={`inputMultiple_${postfix}`}
                         value={i} 
-                        checked={props.answers ? checkRadio(i) : false}
+                        checked={answers ? checkRadio(i) : false}
                         onChange={() => updateStateCheckbox(i)}
                     />
-                    <label class="form-check-label" for={`inputMultiple_${props.postfix}`}>{item.text}</label>
+                    <label class="form-check-label" for={`inputMultiple_${postfix}`}>{item.text}</label>
                 </div>
             )}
         </div>

src/components/typeAnswer/InputRadio.jsx

@@ -1,21 +1,21 @@
 import React from "react";
 import classes from "../../assets/styles/components/typeAnswer/inputRadio.module.scss"
 
-const InputRadio = (props) => {
+const InputRadio = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     return (
         <div className={classes.main}>
-            {props.optionAnswer.map((item, i) => 
+            {optionAnswer.map((item, i) => 
                 <div class="form-check" key={i}>
                     <input 
                         class="form-check-input" 
                         type="radio" 
-                        name={`inputRadio_${props.postfix}`} 
+                        name={`inputRadio_${postfix}`} 
                         id={`choice_${item.id}`} 
                         value={i} 
-                        checked={props.answers ? props.answers[props.id].answer === i : false}
+                        checked={answers ? answers[postfix].answer === i : false}
-                        onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(Number(e.target.value), props.id) : () => {}}
+                        onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
                     />
-                    <label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label>
+                    <label class="form-check-label" for={`inputRadio_${postfix}`}>{item.text}</label>
                 </div>
             )}
             

src/components/typeAnswer/InputText.jsx

@@ -1,14 +1,14 @@
 import React from "react";
 import classes from "../../assets/styles/components/typeAnswer/inputText.module.scss"
 
-const InputText = (props) => {
+const InputText = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     return (
         <div className={classes.main}>
             <input 
                 type="text" 
                 placeholder={"Ответ..."} 
-                value={props.answers ? props.answers[props.id].answer : ""} 
+                value={answers ? answers[postfix].answer : ""} 
-                onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}/>
+                onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}/>
         </div>
     )
 }

src/components/typeAnswer/TextArea.jsx

@@ -1,13 +1,13 @@
 import React from "react";
 import classes from "../../assets/styles/components/typeAnswer/textArea.module.scss"
 
-const TextArea = (props) => {
+const TextArea = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     return (
         <div className={classes.main}>
             <textarea 
                 placeholder={"Ответ..."} 
-                value={props.answers ? props.answers[props.id].answer : ""} 
+                value={answers ? answers[postfix].answer : ""} 
-                onChange={props.updateAnswersForm ? (e) => props.updateAnswersForm(e.target.value, props.id) : () => {}}
+                onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
             ></textarea>
         </div>
     )

src/components/typeAnswer/YesNo.jsx

@@ -1,15 +1,31 @@
 import React from "react";
 import classes from "../../assets/styles/components/typeAnswer/yesNo.module.scss"
 
-const YesNo = (props) => {
+const YesNo = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
     return (
         <div className={classes.main}>
             <div class="form-check">
-                <input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceYes"/>
+                <input 
+                    class="form-check-input" 
+                    type="radio" 
+                    name={`YesOrNo_${postfix}`} 
+                    id="choiceYes"
+                    value="1" 
+                    checked={answers ? answers[postfix].answer === "1" : false}
+                    onChange={updateAnswersForm ? () => updateAnswersForm("1", postfix) : () => {}}
+                />
                 <label class="form-check-label" for="choiceYes">Да</label>
             </div>
             <div class="form-check">
-                <input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceNo"/>
+                <input 
+                    class="form-check-input" 
+                    type="radio" 
+                    name={`YesOrNo_${postfix}`} 
+                    id="choiceNo"
+                    value="2" 
+                    checked={answers ? answers[postfix].answer === "2" : false}
+                    onChange={updateAnswersForm ? () => updateAnswersForm("2", postfix) : () => {}}
+                />
                 <label class="form-check-label" for="choiceNo">Нет</label>
             </div>
         </div>

src/pages/ViewForm.jsx

@@ -51,7 +51,7 @@ const ViewForm = () => {
                 </div>
                 <div className={classes.footer}>
                     <MyButton text={"Отправить"}/>
-                    <MyButton text={"Отмена"} backgroundColor={"rgb(180, 180, 180)"} click={() => console.log(answers)}/>
+                    <MyButton text={"Отмена"} backgroundColor={"rgb(180, 180, 180)"} click={() => {}}/>
                 </div>                 
             </div> :
             <div className={classes.wrapper}>