Skip to content
Advertisement

How can I put validation in react, that if I have choose an option from a drop down, then that option will be disable in the other drop down menu

I am designing a form in react in which I have two categories of dropdown. one is named as “What include” and the other is “What is not include”. Now I want that if the user to select any option from the menu of “What Include”, then that option(item) will be disabled in the other drop-down named “What not Include”.

Here is the code for handle change and UI:

JavaScript

Advertisement

Answer

Not sure if I fully understand the logic, but if the goal is to disable the options if selected else where, perhaps consider to add conditional disabled for each mapped option (if the other selected state already has the value, disable the option), perhaps such as:

Minimized demo of below example: stackblitz

Although not tagged as it, the posted code looks like MUI so the example will use MUI components, but otherwise the approach could still work with other libraries provided that a disabled property is supported.

“What Include” select:

JavaScript

“What is not include” select:

JavaScript
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement