Tengo un formulario en este codesandbox . Tengo console.log el estado para mayor claridad.

Este formulario tiene 3 botones de radio para seleccionar. El botón Community Dialogue no tiene ningún menú desplegable. El botón Interpersonal tiene un menú desplegable con 3 campos de texto para la entrada de datos. El botón Media tiene un menú desplegable para 3 botones de opción. Cada uno de los botones desplegables de medios tiene un menú desplegable con campos de texto para la entrada de datos. Y aquí es donde estoy teniendo problemas.

mi reto

Mi desafío está en el valor condicional del estado de los botones desplegables de Medios en la función setFormData en la línea 93 de App.js Si un usuario selecciona el botón Multimedia y selecciona cualquiera de los subbotones, diga Jingles , el valor de showMediaquestion y showJinglequestion se establecerá en true .

Si el usuario vuelve a seleccionar el botón Community Dialogue , espero que el valor de showMediaquestion y showJinglequestion se establezca de nuevo en false para que el menú desplegable se cierre. Pero en este caso no es así, ya que solo el valor de showMediaquestion se vuelve a establecer en false . En este caso, todos los datos del intento de selección se enviarán como parte del formulario req.body data.

¿Cómo puedo asegurarme de que después de que un usuario seleccione cualquiera de los botones desplegables en el botón de opción Media , si vuelve a seleccionar cualquier otro valor, el estado de showJinglequestion , showElecquestion y showPrintquestion se establecerá de nuevo en falso y solo los datos del último la selección se envía como parte de setFormData ?