Estoy creando una aplicación de reacción con datos de formulario de JSON.

La implementación se completó, pero tengo un problema al crear un cuadro de entrada que depende de otro.

Cosas Probadas:

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

A medida que los datos se recuperan de JSON, he creado una variable de configuración para que el valor predeterminado esté oculto y oculto en la selección de campos particulares.

Problema: (ambos ocurren después de seleccionar la dosis del cuadro de selección)

-> No se puede mostrar el cuadro de entrada de detalles de la dosis uno después de seleccionar la dosis uno.

-> No se puede mostrar el cuadro de entrada de detalles de la dosis dos después de seleccionar la dosis dos.

El problema anterior ocurre debido a la vaccinated: ["reason", "doseOneDetails", "doseTwoDetails"], ya que tiene ambos campos ocultos. Pero estoy atascado en cómo mostrar el campo de entrada respectivo.

Requisito:

Escenario 1:

El usuario selecciona vaccinated como una opción del primer cuadro de selección, luego aparece el cuadro de selección con datos como Dose One y Dose Two . Luego, si el usuario selecciona cualquiera de las dosis, debe agregar detalles sobre esa dosis respectiva.

Escenario 1: (Trabajando ahora)

El usuario selecciona Not Vaccinated como una opción del primer cuadro de selección, luego se mostrará el cuadro de selección del reason .

Ejemplo de trabajo:

La configuración actual solo toma un nivel, pero ¿cómo podemos manejar varios niveles (la entrada depende de otra, etc. ) como el escenario anterior?

Amablemente ayúdame a salir de este apuro ya que estoy atascado con esto por mucho tiempo. Gracias por adelantado.