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!