Warning: Received false for a non-boolean attribute dirty

[danielweinmann]

Another warning I came across is

Warning: Received `false` for a non-boolean attribute `dirty`.

If you want to write it to the DOM, pass a string instead: dirty="false" or dirty={value.toString()}.

If you used to conditionally omit it with dirty={condition && value}, pass dirty={condition ? value : undefined} instead.

which is related to me overriding renderField

export default function Form<Schema extends FormSchema>(
  props: FormProps<Schema>
) {
  return (
    <BaseForm
      className="flex flex-col space-y-6"
      fieldComponent={Field}
      labelComponent={Label}
      inputComponent={Input}
      multilineComponent={TextArea}
      selectComponent={Select}
      radioComponent={Radio}
      radioGroupComponent={RadioGroup}
      radioWrapperComponent={InputWrapper}
      checkboxWrapperComponent={InputWrapper}
      checkboxComponent={Checkbox}
      buttonComponent={SubmitButton}
      globalErrorsComponent={Errors}
      errorComponent={Error}
      renderField={({ Field, ...props }) => {
        const { name, label, required } = props;
        return (
          <Field key={name.toString()} {...props}>
            {({ Label, SmartInput, Errors }) => (
              <>
                <SmartInput {...props} />
                <Label>
                  {label}
                  {required && <sup>*</sup>}
                </Label>
                <Errors />
              </>
            )}
          </Field>
        );
      }}
      {...props}
    />
  );
}

Originally posted by @jjanyan in #154 (comment)

[danielweinmann]

Hey, @jjanyan! I just realized that you're passing {...props} to SmartInput in your example, and that's what's causing the warning :)

You shouldn't pass these props to it. Just render <SmartInput /> and you're good to go.

[jjanyan]

Ah. Thank you so much!