I am struggling with managing the state of a react form - reactjs

Question

i have this json object which i use to map the form. I have a lot of nested questions. It is used for medical purposes. Here's an portion of the json
parts: [
{
title: "Surgery-related",
questions: [
{
type: "radio",
required: true,
label: "Timing of surgery",
name: "timing_of_surgery",
options: [
{
label: "Emergent non-cardiac surgery",
value: "emergent_non_cardiac_surgery",
},
{
label: "Urgent non-cardiac surgery",
value: "urgent_non_cardiac_surgery",
},
{
label: "Time-sensitive non-cardiac surgery",
value: "time_sensitive_non_cardiac_surgery",
},
{
label: "Elective non-cardiac surgery",
value: "elective_non_cardiac_surgery",
name: "elective_non_cardiac_surgery",
nestedQuestion: {
type: "radio",
options: [
{
label: "Possible to defer non-cardiac surgery",
value: "possible_to_defer_non_cardiac_surgery",
},
{
label: "Not possible to defer non-cardiac surgery",
value: "not_possible_to_defer_non_cardiac_surgery",
},
],
},
},
],
},
{
type: "select",
required: true,
label: "Type of surgery or intervention",
name: "type_of_surgery_or_intervention",
options: [
{
value: "Low surgical risk (<1%)",
titles: [
"Breast",
"Dental",
"Endocrine: thyroid",
"Eye",
"Gynaecological: minor",
"Orthopaedic minor (meniscectomy)",
"Reconstructive",
"Superficial surgery",
"Urological minor: (transurethral resection of the prostate)",
"Video assisted thoracic surgery minor lung resection",
],
},
{
value: "Intermediate surgical risk (1-5%)",
titles: [
"Carotid asymptomatic (coronary endarterectomy or coronary artery stenting)",
"Carotid symptomatic (coronary endarterectomy)",
"Endovascular aortic aneurysm repair",
"Head or neck surgery",
"Intraperitoneal: splenectomy, hiatal hernia repair, cholecystectomy",
"Intrathoracic: non-major",
"Neurological or orthopaedic: major (hip and spine surgery)",
"Peripheral arterial angioplasty",
"Renal transplants",
"Urological or gynaecological: major",
],
},
{
value: "High surgical risk (>5%)",
titles: [
"Adrenal resection",
"Aortic and major vascular surgery",
"Carotid symptomatic (Carotid artery stenting)",
"Duodenal-pancreatic surgery",
"Liver resection, bile duct surgery ",
"Oesophagectomy",
"Open lower limb revascularization for acute limb ischaemia or amputation",
"Pneumonectomy (video-assisted thoracic surgery or open surgery)",
"Pulmonary or liver transplant",
"Repair of perforated bowel",
"Total cystectomy",
],
},
],
},
{
type: "select",
required: true,
label: "Bleeding risk",
name: "bleeding_risk",
options: [
{
value: "Minor bleeding risk",
titles: [
"Cataract or glaucoma procedure",
"Dental procedures: extractions (1–3 teeth), periodontal surgery, implant positioning endodontic (root canal) procedures, subgingival scaling/cleaning",
"Endoscopy without biopsy or resection",
" Superficial surgery (e.g. abscess incision, small skin excisions/ biopsy)",
],
},
{
value: "Low bleeding risk",
titles: [
"Abdominal surgery: cholecystectomy, hernia repair, colon resection",
"Breast surgery",
"Complex dental procedures (multiple tooth extractions)",
"Endoscopy with simple biopsy",
"Gastroscopy or colonoscopy with simple biopsy",
"Large-bore needles procedures (e.g. bone marrow or lymph node biopsy)",
"Non-cataract ophthalmic surgery",
"Small orthopaedic surgery (foot, hand arthroscopy)",
],
},
{
value: "High bleeding risk",
titles: [
"Abdominal surgery with liver biopsy, extracorporeal shockwave lithotripsy",
"Extensive cancer surgery (e.g. pancreas, liver)",
"Neuraxial (spinal or epidural) anaesthesia",
"Neurosurgery (intracranial, spinal) ",
"Major orthopaedic surgery ",
"Procedures with vascular organ biopsy (kidney or prostate)",
"Reconstructive plastic surgery",
"Specific interventions (colon polypectomy, lumbar puncture, endovascular aneurysm repair)",
"Thoracic surgery, lung resection surgery",
" Urological surgery (prostatectomy, bladder tumour resection)",
"Vascular surgery (e.g. abdominal aortic aneuvrysm repair, vascular bypass)",
],
},
],
},
],
},
{
title: "Patient-related",
questions: [
{
type: "input",
input_type: "text",
placeholder: "Enter patient's name",
required: true,
label: "Patient's name",
name: "patient_name",
},
{
type: "checkbox",
required: false,
label: "Cardiovascular risk factor",
name: "cardiovascular_risk_factor",
options: [
{
label: "Hypertension",
value: "hypertension",
},
{
label: "Diabetes",
value: "diabetes",
},
{
label: "Dyslipidemia",
value: "dyslipidemia",
},
{
label: "Smoking",
value: "smoking",
},
{
label: "Age greater than or equal to 65 years",
value: "age_greater_than_65_years",
},
{
label: "Family history of cardiovascular disease",
value: "family_history_of_cardiovascular_disease",
required: true,
nestedQuestion: {
type: "checkbox",
options: [
{
label:
"Myocardial infarction or sudden death <55 years with father or brother",
value:
"myocardial_infarction_or_sudden_death_less_than_55_years_with_father_or_brother",
},
{
label:
"Myocardial infarction or sudden death <65 years with mother or sister",
value:
"myocardial_infarction_or_sudden_death_less_than_65_years_with_mother_or_sister",
},
{
label:
"Cerebrovascular accident <45 years with parents or brother/sister",
value:
"cerebrovascular_accident_less_than_45_years_with_parents_or_brother_sister",
},
],
},
},
],
},
{
type: "checkbox",
label: "Antecedents",
name: "antecedents",
sections: [
{
title: "Cardiovascular disease ",
options: [
{
label: "Heart failure",
value: "heart_failure",
namee: "heart_failure",
nestedQuestion: {
type: "radio",
options: [
{
label: "Stable heart failure",
value: "stable_heart_failure",
},
{
label: "Unstable heart failure",
value: "unstable_heart_failure",
},
],
},
},
{
label: "Coronary artery disease",
value: "coronary_artery_disease",
},
{
label: "Vasopastic angina",
value: "vasopastic_angina",
},
{
label: "Mechanical prosthetic valve",
value: "mechanical_prosthetic_valve",
name: "mechanical_prosthetic_valve",
nestedQuestion: {
type: "checkbox",
options: [
{
label:
"Mechanical aortic valve replacement(AVR), associated with ",
value:
"mechanical_aortic_valve_replacement_associated_with",
name: "mechanical_aortic_valve_replacement_associated_with",
nestedQuestion: {
type: "checkbox",
options: [
{
label: "Atrial fibrillation",
value: "atrial_fibrillation1",
},
{
label: "Previous thromboembolism, ",
value: "previous_thromboembolism",
},
{
label: "Severe left ventricular dysfunction ",
value: "severe_left_ventricular_dysfunction",
},
{
label: "Hypercoagulable state",
value: "hypercoagulable_state",
},
]
}
},
{
label:
"Older-generation mechanical aortic valve replacement ",
value:
"older_generation_mechanical_aortic_valve_replacement",
},
{
label: "Mechanical mitral valve replacement",
value: "mechanical_mitral_valve_replacement",
},
],
},
},
{
label: "Atrial fibrillation",
value: "atrial_fibrillation",
},
{
label: "Other rythmic antecedents",
value: "other_rythmic_antecedents",
},
{
label: "Venous thromboembolism",
value: "venous_thromboembolism",
},
],
},
{
title: "Non cardiovascular disease",
options: [
{
label: "Diabetes mellitus",
value: "diabetes_mellitus",
},
{
label: "Renal failure",
value: "renal_failure",
},
],
},
],
},
],
},
{
title: "Examination",
questions: [
{
type: "checkbox",
required: true,
label: "Examination",
name: "examination",
options: [
{
label: "Asymptomatic",
value: "asymptomatic",
default: true,
},
{
label: "Newly detected murmurs",
value: "newly_detected_murmurs",
},
{
label: "Chest pain",
value: "chest_pain",
},
{
label: "Symptoms/signs suggestive of cardio-vascular disease",
value: "symptoms_signs_suggestive_of_cardiovascular_disease",
},
{
label:
"Poor functional capacity (METs<4 –if the patient cannot climb two flights of stairs-)",
value: "poor_functional_capacity",
},
{
label: "High clinical risk factor : (RCRI >= 1)",
value: "high_clinical_risk_factor",
name: "high_clinical_risk_factor",
required: true,
nestedQuestion: {
type: "checkbox",
options: [
{
label: "Ischaemic heart disease",
value: "ischaemic_heart_disease",
},
{
label: "Cerebrovascular disease",
value: "cerebrovascular_disease",
},
{
label: "History of congestive heart failure",
value: "history_of_congestive_heart_failure",
},
{
label: "Insulin therapy for diabetes",
value: "insulin_therapy_for_diabetes",
},
{
label: "Serum creatinine level ≥2 mg/dL",
value:
"serum_creatinine_level_greater_than_or_equal_to_2_mg_per_dL",
},
{
label: "High-risk surgery",
value: "high_risk_surgery",
},
],
},
},
{
label: "Abnormal ECG",
value: "abnormal_ecg",
name: "abnormal_ecg",
required: true,
nestedQuestion: {
type: "checkbox",
options: [
{
label: "Pathological Q wave",
value: "pathological_q_wave",
},
{
label: "ST-T wave changes",
value: "st_t_wave_changes",
},
{
label: "Non-sinus rhythm",
value: "non_sinus_rhythm",
},
{
label: "Left bundle branch block",
value: "left_bundle_branch_block",
},
],
},
},
{
label: "High NT-pro-BNP/BNP",
value: "high_nt_pro_bnp_bnp",
},
{
label: "Acute coronary syndrome",
value: "acute_coronary_syndrome",
},
],
},
],
},
],
The way i render this form is using recursion. I have this jsx component named Question.jsx which i pass with it the question. Where i'm stuck is to manage the state of the hole form in one useState hook object. And espacialy when it comes to nested questions with levels of more the 2. As i need to update the parent. I realy need help please !