how to change one fields value based on the other in redux-form?

Question

I understand there is few other similar questions in stackoverflow but I have been investigating them and none are helping my scenario or at-least I am not getting it so here's my situation:

I have a component(lets call it MainComponent ) with two inputs inside. The first input is a checkbox and the second one is a picker (yes the native one). What I am trying to do is when I click one checkbox the corresponding picker is getting disabled but I can't remove the value of the picker(which i selected when it became enabled) from redux-form state. If i select other checkbox previous one does get disabled but the value stays.

Note that I am rendering this MainComponent multiple times from another component based on some array of objects.

MainFile.js

categories.map((categoryItem, index)=>
 items.map((item, index)=>
   <Fields names={[${categoryItem.label}, ${categoryItem.label}.${item.label}]}
           component={Inputs}    
))

Inputs.js

<CheckBox ...>
<Picker ...>

The checkbox and the picker is setup correctly with the inputs: {value, onChange} etc.

I have tried to change value within this inputs.js but then I realized it was wrong and it gave me error that i cant change something from render.

What I am trying to achieve is a way when I uncheck the checkbox I want to also change the value of the picker( The picker data should be removed from the redux-form state ). How can i do that? Help would be much appreciated.

Answer 1

Whatever I understood from your question is that you want to update a field in redux-form .

redux-form has change method which can be utilized to update any field value dynamically.

import { reduxForm, change } from 'redux-form';

const mapDispatchToProps = { updateField: (field, data) => change( "YOUR_FORM_NAME", field, data ) }

Would this help?

Answer 2

If you want to remove the picker from the redux state you can use props UnregisterField

Import it into your file

import { unregisterField } from 'redux-form';

and in your code

 this.props.unregisterField(yourFormName, yourFieldName);