Disabling options in Autoselect material ui

Question

I am trying to disable options in autocomplete of material ui based on a certain condition, I'm having an array and mapping it over a table , so every table row has a autocomplete , so whenever an option is selected in an table cell of autocomplete , that option should be disabled in the next table cell of autocomplete of the same row. I tried searching the docs , but couldn't find an example similar to what I'm trying to achieve . There is a prop getOptionDisabled which is possible to disable an option if the option is array, I'm not sure if it can be used in my condition.

The options I'm passing is in this.state.data

Here is what I have tried so far https://codesandbox.io/s/bold-https-o7dz3

CodeSandbox

Update : link of codesandbox https://codesandbox.io/s/bold-https-o7dz3

Answer 1

If you want to disable an option based on the value what you have done is correct only thing is you have not checked any value rather you have a text "Batch No."

Here is the Documentation for disabled

I just checked a value as an example 588 and I get desired result

EDIT 1

Please not it's not a full implementation, I shall try to give the sandbox for full implementation in the evening. For now it's the approach

I simply added an array (however we need multidimensional array to keep tract of the values that are chosen for each group)

And during handlechange event push the newly selected item to the array and remove old one (Please implement this)

Now add a function that would check if the item exists in this list

Finally bind this function to getOptionDisabled

Here's the final output

Edit 2: working example

Here is the working example https://codesandbox.io/s/objective-framework-jwx3n