[react] value doesn't update on the component

component value doesn’t update after setting the state (which is passed to props as value) here’s a jsfiddle( https://jsfiddle.net/w6w30Lv7/) to show the bug.

[nosir]

Fix applied, some explanation for the fix:

Inside the cleave component, no doubt input.value is bound to the value state, however, this only happens internally, the state can’t be shared with parent components.

In the fix, I added a setRawValue method, which works same as the plain JS one.

Check this: https://jsfiddle.net/nosir/wqm8pm6c/

If you need to update/reset the cleave field value from model, this is the way:

1. Pass onInit to component, the callback returns the cleave instance, store it as a variable or in state.
2. Whenever you want to update value, call cleave.setRawValue('...') to trigger the change.
3. onChange event will be automatically triggered, from here you can grab the returned raw/formatted value and update your state.

[cht8687]

If you put a $ sign on onInit, this really likes Angular component lifecycle now…lol