section 3 data to main

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -2,19 +2,20 @@ import * as React from 'react';
 import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
+import { useEffect } from 'react';
 
-interface FormValues {
+interface Patient {
-  physicianname: string;
+  physicianname: string |undefined;
-  physiciancity: string;
+  physiciancity: string |undefined;
-  physicianstate: string;
+  physicianstate: string |undefined;
-  physicianphone: string;
+  physicianphone: string |undefined;
-  chiropractorName: string;
+  chiropractorName: string |undefined;
-  chiropractorState: string;
+  chiropractorState: string |undefined;
-  xray: boolean;
+  xray: string|undefined;
-  ctScan: boolean;
+  haveChiropractor: string|undefined;
-  cdImages: boolean;
+  reference: string|undefined;
-  visitDetails: string;
+  visitDetails: string |undefined;
-  cellPhoneProvider: string;
+  cellPhoneProvider: string |undefined;
 }
 
 const validationSchema = Yup.object({
@@ -24,35 +25,61 @@ const validationSchema = Yup.object({
   phone: Yup.string().required('Required'),
   chiropractorName: Yup.string().required('Required'),
   xray: Yup.boolean().required('Required'),
-  ctScan: Yup.boolean().required('Required'),
+  haveChiropractor: Yup.boolean().required('Required'),
-  cdImages: Yup.boolean().required('Required'),
+  reference: Yup.boolean().required('Required'),
   visitDetails: Yup.string().required('Required'),
   cellPhoneProvider: Yup.string().required('Required'),
 });
 
-export default function MedicalHistoryForm(){
+type Props = {
-    const formik = useFormik<FormValues>({
+    handleFormSection3Data:(
-        initialValues:{
+        physicianname?: string |undefined,
-            physicianname: '',
+        physiciancity?: string |undefined,
-            physiciancity: '',
+        physicianstate?: string |undefined,
-            physicianstate: '',
+        physicianphone?: string |undefined,
-            physicianphone: '',
+        chiropractorName?: string |undefined,
-            chiropractorName: '',
+        chiropractorState?: string |undefined,
-            chiropractorState: '',
+        xray?: string|undefined,
-            xray: false,
+        haveChiropractor?: string|undefined,
-            ctScan: false,
+        reference?: string|undefined,
-            cdImages: false,
+        visitDetails?: string |undefined,
-            visitDetails: '',
+        cellPhoneProvider?: string |undefined,
-            cellPhoneProvider: '',
+    )=> void
-        },
+  }
-        validationSchema,
+
-        onSubmit:(values)=>{
+export default function MedicalHistoryForm({handleFormSection3Data}:Props){
-            console.log(values);
+    
-        }
+    const [patient, setPatient] = React.useState<Patient>({
-    })
+        physicianname: '',
+        physiciancity: '',
+        physicianstate: '',
+        physicianphone: '',
+        chiropractorName: '',
+        chiropractorState: '',
+        xray: '',
+        haveChiropractor: '',
+        reference: '',
+        visitDetails: '',
+        cellPhoneProvider: '',
+      });
+   
+      useEffect(()=>{
+        handleFormSection3Data(
+            patient.physicianname,
+            patient.physiciancity,
+            patient.physicianstate,
+            patient.physicianphone,
+            patient.chiropractorName,
+            patient.chiropractorState,
+            patient.xray,
+            patient.haveChiropractor,
+            patient.reference,
+            patient.visitDetails,
+            patient.cellPhoneProvider,
+        )
+      },[patient])
     return(
         <>
-        <form onSubmit={formik.handleSubmit}>
         <Grid item xs={12} className='collapsable-form-style '> 
             <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
         </Grid>
@@ -63,9 +90,14 @@ export default function MedicalHistoryForm(){
                 variant="outlined"
                 label="Family physician" 
                 name='physicianname'
-                onChange={formik.handleChange}
+                onChange={(e)=>{
-                value={formik.values.physicianname}
+                    setPatient((prevValues) => ({
-                onBlur={formik.handleBlur}
+                        ...prevValues,
+                        physicianname: e.target.value,
+                      }));
+                }}
+                value={patient.physicianname}
+                // onBlur={formik.handleBlur}
                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
@@ -73,9 +105,14 @@ export default function MedicalHistoryForm(){
                 variant="outlined"
                 label="City" 
                 name='physiciancity'
-                onChange={formik.handleChange}
+                onChange={(e)=>{
-                value={formik.values.physiciancity}
+                    setPatient((prevValues) => ({
-                onBlur={formik.handleBlur}
+                        ...prevValues,
+                        physiciancity: e.target.value,
+                      }));
+                }}
+                value={patient.physiciancity}
+                // onBlur={formik.handleBlur}
                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
@@ -83,9 +120,14 @@ export default function MedicalHistoryForm(){
                  variant="outlined"
                  label="State" 
                  name='physicianstate'
-                 onChange={formik.handleChange}
+                 onChange={(e)=>{
-                 value={formik.values.physicianstate}
+                    setPatient((prevValues) => ({
-                 onBlur={formik.handleBlur}
+                        ...prevValues,
+                        physicianstate: e.target.value,
+                      }));
+                }}
+                 value={patient.physicianstate}
+                //  onBlur={formik.handleBlur}
                  />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style'>
@@ -94,9 +136,14 @@ export default function MedicalHistoryForm(){
                 label="Phone" 
                 type="number"
                 name='physicianphone'
-                onChange={formik.handleChange}
+                onChange={(e)=>{
-                value={formik.values.physicianphone}
+                    setPatient((prevValues) => ({
-                onBlur={formik.handleBlur}
+                        ...prevValues,
+                        physicianphone: e.target.value,
+                      }));
+                }}
+                value={patient.physicianphone}
+                // onBlur={formik.handleBlur}
                 />
             </Grid>
             
@@ -115,7 +162,12 @@ export default function MedicalHistoryForm(){
                     aria-labelledby="demo-radio-buttons-group-label"
                     // defaultValue="yes"
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            haveChiropractor: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
                     <FormControlLabel value="yes" control={<Radio />} label="Yes" />
@@ -129,9 +181,14 @@ export default function MedicalHistoryForm(){
                  variant="outlined"
                  label="Chiropractor's Name" 
                  name='chiropractorName'
-                 onChange={formik.handleChange}
+                 onChange={(e)=>{
-                 value={formik.values.chiropractorName}
+                    setPatient((prevValues) => ({
-                 onBlur={formik.handleBlur}
+                        ...prevValues,
+                        chiropractorName: e.target.value,
+                      }));
+                }}
+                 value={patient.chiropractorName}
+                //  onBlur={formik.handleBlur}
                  />
             </Grid>
 
@@ -140,9 +197,14 @@ export default function MedicalHistoryForm(){
                  variant="outlined"
                  label="City/State" 
                  name='chiropractorState'
-                 onChange={formik.handleChange}
+                 onChange={(e)=>{
-                 value={formik.values.chiropractorState}
+                    setPatient((prevValues) => ({
-                 onBlur={formik.handleBlur}
+                        ...prevValues,
+                        chiropractorState: e.target.value,
+                      }));
+                }}
+                 value={patient.chiropractorState}
+                //  onBlur={formik.handleBlur}
                  />
             </Grid>
         </Grid>
@@ -155,7 +217,12 @@ export default function MedicalHistoryForm(){
                     aria-labelledby="demo-radio-buttons-group-label"
                     // defaultValue="yes"
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            xray: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
                     <FormControlLabel value="yes" control={<Radio />} label="Yes" />
@@ -172,7 +239,12 @@ export default function MedicalHistoryForm(){
                     aria-labelledby="demo-radio-buttons-group-label"
                     // defaultValue="physician"
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            reference: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
                     <FormControlLabel value="friend" control={<Radio />} label="Friend" />
@@ -193,7 +265,12 @@ export default function MedicalHistoryForm(){
                     aria-labelledby="demo-radio-buttons-group-label"
                     // defaultValue="email"
                     name="radio-buttons-group"
-                    onChange={formik.handleChange}
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            cellPhoneProvider: e.target.value,
+                          }));
+                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
                     <FormControlLabel value="email" control={<Radio />} label="Email" />
@@ -201,7 +278,6 @@ export default function MedicalHistoryForm(){
                 </RadioGroup>
             </FormControl>
         </Grid>
-        </form>
         </>
     )}
             

src/Components/PatientForm/PatientForm.tsx

@@ -79,6 +79,7 @@ export default function PatientForm(){
     const [signature,setSignature]=React.useState('');
     const [section1Data, setSection1Data] = React.useState<any>({});
     const [section2Data, setSection2Data] = React.useState<any>({});
+    const [section3Data, setSection3Data] = React.useState<any>({});
 
     const handleFormSection1Data = (
       fullName?: string|undefined,
@@ -139,6 +140,34 @@ export default function PatientForm(){
         spousePhone,
       })
     }
+
+    const handleFormSection3Data = (
+      physicianname: string |undefined,
+      physiciancity: string |undefined,
+      physicianstate: string |undefined,
+      physicianphone: string |undefined,
+      chiropractorName: string |undefined,
+      chiropractorState: string |undefined,
+      xray: string|undefined,
+      haveChiropractor: string|undefined,
+      reference: string|undefined,
+      visitDetails: string |undefined,
+      cellPhoneProvider: string |undefined,
+    ) =>{
+      setSection3Data({
+        physicianname,
+        physiciancity,
+        physicianstate,
+        physicianphone,
+        chiropractorName,
+        chiropractorState,
+        xray,
+        haveChiropractor,
+        reference,
+        visitDetails,
+        cellPhoneProvider,
+      })
+    }
     
       const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -153,7 +182,7 @@ export default function PatientForm(){
         setIsChecked(event.target.checked);
       };
 
-      console.log(section1Data,"wyeytweevfde",section2Data)
+      console.log(section3Data,"wyeytweevfde",section2Data)
     
 
     return(
@@ -198,7 +227,7 @@ export default function PatientForm(){
                             </AccordionSummary>
                             
                             <AccordionDetails>
-                                <MedicalHistory/>
+                                <MedicalHistory handleFormSection3Data={handleFormSection3Data}/>
                             </AccordionDetails>
                         </Accordion>