I have a form in this codesandbox. I have console.log the state for clarity.

The form has 3 radio button to select from. The Community Dialogue button doesn't have any dropdown. The Interpersonal button has a dropdown with 3 textfields for data input. The Media button has dropdown for 3 radio buttons. Each of the Media dropdown buttons has a dropdown with textfields for data input.

My Challenge

My challenge is in the conditional value of the state of Media dropdown buttons in the setFormData function in line 93 of App.js. If a user select the Media button and select any of the sub-button say Jingles, the value of showMediaquestion and showJinglequestion will be set to true.

If the user select back say the Community Dialogue button, I expect that the value of showMediaquestion and showJinglequestion will be set back to false so that the dropdown will close. But in this case it is not as only the value of showMediaquestion is set back to false.

How can I make sure that after a user select any of the dropdown buttons under Media radio button, if they go back to select any other value the state of showJinglequestion, showElecquestion and showPrintquestion will be set back to false?