Select all checkbox redux form - material-ui

Question

I want to check/ uncheck all checkboxes the moment I select Check All but can't make it work. I'm using material-ui components and redux-form. my plan is to grab checkAll field value using formValueSelector API and set checkbox A and B value based of that. Also tried using value prop but no luck still.
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { Checkbox } from 'redux-form-material-ui';
let Form = (props) => {
return (
<form>
<Field name="checkAll" id="checkAll" label="Check All" component={ Checkbox } />
<Field name="a" label="A" component={ Checkbox } checked={ props.checkAll } />
<Field name="b" label="B" component={ Checkbox } checked={ props.checkAll } />
</form>
);
};
Form = reduxForm({
form: 'Form'
})(AddReturnModal);
// Decorate with connect to read form values
const selector = formValueSelector('Form'); // <-- same as form name
Form = connect(
(state) => {
const checkAll = selector(state, 'checkAll');
return {
checkAll
};
}
)(Form);
export default Form;

Answer 1

You could use change method. From docs:
change(field:String, value:any) : Function
Changes the value of a field in the Redux store. This is a bound action creator, so it returns nothing.
The only solution I see is to loop over the list of checkboxes and call change(checkboxName, value) on them.

Answer 2

#notgiorgi is right, to select all checkboxes, you can do this:
selectAll = () => {
const { change } = this.props
['a', 'b'].forEach((field) => change(field, true))
}
If you wanted a toggle, you might easily/cheaply/ignorantly be able to keep a rough reference to the selectAll state:
selectAllValue = false
selectAll = () => {
const { change } = this.props
['a', 'b'].forEach((field) => change(field, this.selectAllValue))
// toggle select all to select none
this.selectAllValue = !this.selectAllValue
}