I am making a react app with form data from JSON.

Implementation wise completed but I am stuck with an issue in making an input box which depend on another.

Things Tried:

  const config: { [key: string]: any } = {
    defaultHidden: [
      "dose",
      "reason",
      "moreDetails",
      "doseOneDetails",
      "doseTwoDetails"
    ],

    vaccinated: {
      vaccinated: ["reason", "doseOneDetails", "doseTwoDetails"],
      not_vaccinated: ["dose", "doseOneDetails", "doseTwoDetails"]
    }
  };

As the data is retrieved from JSON, I have made a configuration variable to make the defualt hidden and hidden on selection of particular fields.

Issue: (Both happen after selecting the dose from select box)

-> Unable to display the dose one details input box after selecting dose one.

-> Unable to display the dose two details input box after selecting dose two.

The above issue happens because of vaccinated: ["reason", "doseOneDetails", "doseTwoDetails"], as it has both the fields under hidden. But I am stuck how to display the respective input field.

Requirement:

Scenario 1:

User selects vaccinated as an option from first select box, then the select box with data as Dose One and Dose Two appears. Then if user select any of the dose then he need to add details on that respective dose.

Scenario 1: (Working Now)

User selects Not Vaccinated as an option from first select box, then the reason select box will be displayed.

Working Example:

The current configuration takes only one level but how can we handle multi level (Input depending on other and so on) like the above scenario?

Kindly help me to get out of this huddle as I am stuck with this for long. Thanks in advance.