First off, thanks so much for all of the amazing work you have done with React Final Form (as well as its predecessors).
This is a potential bug report
What is the current behavior?
I have an interesting issue where I have abstracted some of the React Final Form (RFF) logic into a higher-order-component called withFormHandler
that wraps other components that are just the form inputs. Data handling (loading, processing submissions and resets) and form presentation (such as in a modal window) is controlled by the component that loads the form. This allows me to reuse all of my RFF boilerplate code with multiple forms.
One of these forms needs to dynamically create new rows of inputs for adding price modifiers (surcharges, discounts, taxes, etc) to a product, and I was looking to use React Final Form Arrays to do so, much like the how the simple example adds customers when you click a button. But because I don't require FieldArrays
in every form, they are not loaded as part of the boilerplate, and are instead passed through from the parent component.
The actual problem is that when I attempt to use the mutators.push
function, I receive the following error:
TypeError Cannot read property 'changeValue' of undefined
I have recreated a stripped down version of my setup in a sandbox: https://codesandbox.io/s/nn6jj4nj3p
If you look at the console output, you will see that the mutators appear to be getting passed through to my form, and the error is occurring because _ref2
in the push function is undefined:
var push = function push(_ref, state, _ref2) {
var name = _ref[0],
value = _ref[1];
var changeValue = _ref2.changeValue; // <== this line go boom
changeValue(state, name, function (array) {
return array ? [].concat(array, [value]) : [value];
});
};
So I don't know if the error is happening because of something I have set up incorrectly, or because this is an actual bug.
What is the expected behavior?
for mutators.push
to not throw an error.
Sandbox Link
https://codesandbox.io/s/nn6jj4nj3p
What's your environment?
Local:
"react": "^16.6.0",
"react-dom": "^16.6.0",
"final-form": "^4.11.0",
"final-form-arrays": "^1.1.2",
"react-final-form": "^4.0.2",
"react-final-form-arrays": "^2.0.1",
OS: Windows 10
Browser: Chrome, FF
Node: 10.15.1
Other information
Thanks in advance for any and all help with regards to this issue