In trying to solve my own problem that I asked about over here, I added some console debugging statements:
return (
<Controller
control={control}
name={name}
key={headline + '_' + name + '_' + i}
defaultValue=''
render={({ field, formState, fieldState }) => {
console.log('field is');
console.dir(field, { depth: null});
console.log('formState is');
console.dir(formState, { depth: null});
console.log('fieldState is');
console.dir(fieldState, { depth: null});
return React.cloneElement(item.component, {
inputRef: field.ref,
error: !!fieldState.error,
helperText: fieldState.error?.message,
FormHelperTextProps: { error: true }
})
}}
/>
);
If I drill into what that outputs, I see
[Log] field is (src_Login_js.chunk.js, line 395)
[Log] Object (src_Login_js.chunk.js, line 396)
name: "username"
onBlur: function()
onChange: function()
ref: function()
arguments: TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.
caller: TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.
length: 1
name: ""
Function Prototype
value: ""
What I want to know is, does the context refer to my console.logs, or is that an actual error in the render props which I should further investigate?