section 8 data to main

src/Components/PatientForm/OtherDetails8.tsx

@@ -1,10 +1,10 @@
 import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import React from "react";
+import React, { useEffect } from "react";
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import dayjs from "dayjs";
 
-interface FormValues {
+interface Patient {
     familyHistory: string;
     sleep: string;
     pillow:string;
@@ -14,9 +14,21 @@ interface FormValues {
     menstralCycle: any;
   }
 
-export default function OtherDetails8(){
+  type Props = {
+    handleFormSection8Data:(
+      familyHistory: string|undefined,
+      sleep: string|undefined,
+      pillow:string|undefined,
+      orthotics:string|undefined,
+      brestExam: any,
+      pregnancy:string|undefined,
+      menstralCycle: any,
+    )=> void
+  }
 
-    const [values, setValues] = React.useState<FormValues>({
+export default function OtherDetails8({handleFormSection8Data}:Props){
+  
+    const [patient, setPatient] = React.useState<Patient>({
         familyHistory: '',
         sleep: '',
         pillow:'',
@@ -26,6 +38,18 @@ export default function OtherDetails8(){
         menstralCycle: dayjs('2022-04-17'),
     });
 
+    useEffect(()=>{
+      handleFormSection8Data(
+        patient.familyHistory,
+        patient.sleep,
+        patient.pillow,
+        patient.orthotics,
+        patient.brestExam=dayjs(patient.brestExam),
+        patient.pregnancy,
+        patient.menstralCycle=dayjs(patient.menstralCycle)
+      )
+    },[patient])
+
     const formatDate = (inputDate:any) => {
       const date = new Date(inputDate);
       const year = date.getUTCFullYear();
@@ -35,7 +59,8 @@ export default function OtherDetails8(){
       return `${year}-${month}-${day}`;
     };
 
-    console.log("dsfdsfsdf",values)
+  
+
     
     return(
         <>
@@ -48,7 +73,7 @@ export default function OtherDetails8(){
                 label="" 
                 name='explanation'
                 onChange={(event:any) => {
-                  setValues((prevValues) => ({
+                  setPatient((prevValues) => ({
                     ...prevValues,
                     familyHistory: event.target.value,
                   }));
@@ -62,9 +87,9 @@ export default function OtherDetails8(){
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
-                            educationLevel: event.target.value,
+                            sleep: event.target.value,
                           }));
                         }}
                         >
@@ -81,7 +106,7 @@ export default function OtherDetails8(){
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             pillow: event.target.value,
                           }));
@@ -99,7 +124,7 @@ export default function OtherDetails8(){
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
                             orthotics: event.target.value,
                           }));
@@ -116,10 +141,10 @@ export default function OtherDetails8(){
                 <FormControl>
                     <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DatePicker
-                    value={values.brestExam}
+                    value={patient.brestExam}
                     onChange={(event) => {
                       const formattedDate = formatDate(event)
-                      setValues((prevValues) => ({
+                      setPatient((prevValues) => ({
                         ...prevValues,
                         brestExam: formattedDate,
                       }));
@@ -140,9 +165,9 @@ export default function OtherDetails8(){
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
                         onChange={(event) => {
-                          setValues((prevValues) => ({
+                          setPatient((prevValues) => ({
                             ...prevValues,
-                            orthotics: event.target.value,
+                            pregnancy: event.target.value,
                           }));
                         }}
                         >
@@ -157,10 +182,10 @@ export default function OtherDetails8(){
                 <FormControl>
                     <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DatePicker
-                    value={values.menstralCycle}
+                    value={patient.menstralCycle}
                     onChange={(event) => {
                       const formattedDate = formatDate(event)
-                      setValues((prevValues) => ({
+                      setPatient((prevValues) => ({
                         ...prevValues,
                         menstralCycle: formattedDate,
                       }));

src/Components/PatientForm/PatientForm.tsx

@@ -84,6 +84,7 @@ export default function PatientForm(){
     const [section5Data, setSection5Data] = React.useState<any>({});
     const [section6Data, setSection6Data] = React.useState<any>({});
     const [section7Data, setSection7Data] = React.useState<any>({});
+    const [section8Data, setSection8Data] = React.useState<any>({});
 
     const handleFormSection1Data = (
       fullName?: string|undefined,
@@ -312,6 +313,26 @@ export default function PatientForm(){
       })
     }
 
+    const handleFormSection8Data = (
+      familyHistory: string|undefined,
+      sleep: string|undefined,
+      pillow:string|undefined,
+      orthotics:string|undefined,
+      brestExam: any,
+      pregnancy:string|undefined,
+      menstralCycle: any,
+    ) =>{
+      setSection8Data({
+        familyHistory,
+        sleep,
+        pillow,
+        orthotics,
+        brestExam,
+        pregnancy,
+        menstralCycle,
+      })
+    }
+    
       const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
       };
@@ -325,7 +346,7 @@ export default function PatientForm(){
         setIsChecked(event.target.checked);
       };
 
-      console.log("wyeytweevfde",section7Data)
+      console.log("wyeytweevfde",section8Data)
     
 
     return(
@@ -420,7 +441,7 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <OtherDetails8/>
+                                <OtherDetails8 handleFormSection8Data={handleFormSection8Data}/>
                             </AccordionDetails>
                         </Accordion>