0

I'm working with the formik library currenty and have props for my React.FC defined as the following:

import { useField, FieldAttributes } from "formik";

const propTypes = {
  label: PropTypes.string
};

type TextFieldProps = InferProps<typeof propTypes> & FieldAttributes<[]>;

however when I try to assign proptypes to my component:

TextField.propTypes = propTypes;

I get an error that is quite hard to understand, but it seems like the "FieldAttributes" type is screwing it up somehow, how can I account for it in my proptypes?

Type '{ label: PropTypes.Requireable<string>; }' is not assignable to type 'WeakValidationMap<InferPropsInner<Pick<{ label: Requireable<string>; }, never>> & Partial<InferPropsInner<Pick<{ label: Requireable<string>; }, "label">>> & ... 4 more ... & { ...; }> | WeakValidationMap<...> | WeakValidationMap<...> | undefined'.
  Type '{ label: PropTypes.Requireable<string>; }' is not assignable to type 'WeakValidationMap<InferPropsInner<Pick<{ label: Requireable<string>; }, never>> & Partial<InferPropsInner<Pick<{ label: Requireable<string>; }, "label">>> & ... 4 more ... & { ...; }>'.
    The types returned by 'toString(...)' are incompatible between these types.
      Type 'string' is not assignable to type 'Error | null'.ts(2322)

And the TextField FC:

export const TextField: React.FC<TextFieldProps> = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  return (
    <div className="form-group">
      <label htmlFor={field.name}>
        {label}
        <input
          {...field}
          {...meta}
          className="form-control"
          placeholder={placeholder}
        />
      </label>
      <div>{meta.error}</div>
    </div>
  );
};

Any suggestion is welcome!

MMStarr
  • 151
  • 1
  • 5
  • Where is `TextField` declared? You showed us `TextFieldProps`, which isn't a class so it doesn't have a prototype or constructor that can have properties assigned to it. – kaya3 Mar 03 '20 at 11:53
  • @kaya3 Updated post – MMStarr Mar 03 '20 at 12:04

0 Answers0