Programmatically clear/reset React-Select label in multi mode?

Question

I am new to react and trying to maintain/ update some existing code in an application

In a form, we have a react-select custom/extended component for which the values are set using 'onChange' of react-select. In this case, we have an issue with resetting the selected label even when the state is reset (during component re-rendering, not initial rendering)

I have tried the below code for non-multi select component and it did work, ie forced selected labels to re-render in the UI when state value is reset

key={`my_unique_select_key__${selected}`}

however when i have a 'multi' select component, the above code is not suitable since there can be more than 1 'selected' value. Tried various options for 'key' property ie generated list of keys selected by using map function on selected values list but didn't work for me

Also i cannot pass null for 'value' property, since we are using 'onChange' to set values. ie trying to set the value property will conflict with existing onChange functionality for setting value(s).

Not sure how i can resolve this issue since i am still exploring available/ other options.

Note: code mentioned above is part of the earlier post How to programmatically clear/reset React-Select?

Answer 1

You could also try by setting the value to an empty string. For example:

    document.getElementById('TagOfTheLabel').value = "";

And if it results with an error, try:

    document.getElementById('TagOfTheLabel').innerHTML = "";

Note: if it wants atleast a single charecter or string, replace ""; with " "; . In words, just add a space.