reactjsrsuite

How to programmatically update the value of a TagInput in RSuite?


I am trying to update the value of a RSuite TagInput programmatically to assist the user in inputting more complex values through an interface. However, no matter what I try it seems the TagInput will only update when the user interacts with it directly. The official documentation does not mention any way for this component to be updated with code. As well, setting the value property of the TagInput does not appear to do anything.

I have noticed that the TagInput has it's value property labeled as controlled. However, other components like the RSuite Input also have their value labeled as controlled, but they are updatable with code.

Is there any way to update the TagInput using JavaScript?


Solution

  • Values that you want to set for TagInput, have to be passed inside the defaultValue prop (instead of the value prop) of the TagInput component and the value which you will pass should be in ARRAY format. And add a key prop with a unique value (which should change on every render) then the value of the TagInput component will get updated on every component re-render.

    <TagInput key={`${Math.floor((Math.random() * 1000))}-somename`} defaultValue={['value1','value2']}/>

    You can see this rsuite official doc:

    enter image description here