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

This 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. And this is where I am having issue.

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. In this case, all data for the attempted selection will be sent as part of the form req.body data.

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 and only the data for the last selection is sent as part of the setFormData?