Skip to main content

Common Issues

This section will try to help you debug and decipher common issues, warnings, and errors you might see while using SQForm.

Have a suggestion for a common error or warning you'd like to see in this section? Open an issue!

Warnings​

Warning: out-of-range value for the select component​

The warning​

Material-UI: You have provided an out-of-range value [someValue] for the select (name="[someName]") component

Potentially affected components: SQFormDropdown, SQFormMultiSelect

Most Likely Cause​

This warning happens when the initialValue you provide to SQForm for component [someName] does not match one of the provided options to the dropdown component. 

/* some component definition */

const initialValues = {
  someName: 'someUnknownValue',
};

const SQFormDropdownOptions = [
  { label: 'someLabel', value: 'someValue' },
  { label: 'anotherLabel', value: 'anotherLabel' },
];

return (
  <SQForm
    onSubmit={() => {}}
    initialValues={initialValues}
  >
    <SQFormDropdown name="someName", label="Some Label">
      {SQFormDropdownOptions}
    </SQFormDropdown>
  </SQForm>
);
info

This is causing a warning because the options provided to SQFormDropdown as children does not include an option that has the value someUnkownValue as used in our initialValues object.

Potential Fix​

To fix this we would need to set our someName initialValue to an empty string, '', or one of the options defined in the SQFormDropdownOptions array.

const initialValues = {
  someName: 'someValue',
};

Warning: A component is changing an uncontrolled input of type undefined to be controlled.​

The warning​

A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Potentially affected components: All components

Most Likely Cause​

This warning happens when the initialValue for a particular form element is undefined.

/* some component definition */

const initialValues = {};

return (
  <SQForm
    onSubmit={() => {}}
    initialValues={initialValues}
  >
    <SQFormTextField name="someName", label="Text Label" />
  </SQForm>
);
info

This is causing a warning because the initialValues object does not contain a key of someName so that initialValues.someName is undefined.

Potential Fix​

To fix this we would need to add the key someName to our initialValues and provided it a non-undefined value. If want an empty value us an empty string, ''.

Runtime Errors​

TypeError: Cannot read property 'toLowerCase' of undefined​

Potentially affected components: SQFormCheckboxGroup, SQFormDropdown, SQFormMultiSelect, SQFormRadioButtonGroup

Most Likely Cause​

This runtime error usually occurs when the required prop label is not provided to the component.

Potential Fix​

To fix this error we would need to provide a string to the label prop of the component. If you don't want to display a label you should pass an empty string ''.