Props error on DateTimePicker component using react-widgets

Question

I have this simple reusable DateTimePicker component using react-widgets that I am building. Its quite as basic as it can be but I don't have an idea why it throws this error eventhough I had accommodated the rest of the properties inside the DateTimePicker and had spread across in the DateTimePicker Props.

The error was this, which looks like the props did not spread across the DateTimePicker

Type '{ as?: any; children?: ReactNode; className?: string | undefined; content?: ReactNode; control?: any; disabled?: boolean | undefined; id?: string | number | undefined; ... 6 more ...; onChange: (event: any) => void; }' is not assignable to type 'Readonly<DateTimePickerProps>'.
  Types of property 'id' are incompatible.
    Type 'string | number | undefined' is not assignable to type 'string | undefined'.
      Type 'number' is not assignable to type 'string | undefined'.

Below is the code for my DateInput.tsx

import React from "react";
import { FieldRenderProps } from "react-final-form";
import { FormFieldProps, Form, Label } from "semantic-ui-react";
import { DateTimePicker } from "react-widgets";

interface IProps extends FieldRenderProps<Date, HTMLElement>, FormFieldProps {}

const DateInput: React.FC<IProps> = ({
  input,
  width,
  placeholder,
  meta: touched,
  error,
  ...props
}) => {
  return (
    <Form.Field error={touched && !!error} width={width}>
      <DateTimePicker
        placeholder={placeholder}
        value={input.value || null}
        onChange={input.onChange}
        {...props}
      />
      {touched && error && (
        <Label basic color="red">
          {error}
        </Label>
      )}
    </Form.Field>
  );
};

Any ideas what I am doing wrong?

Answer 1

react-widgets expects id prop with a type of string | undefined. However, in your case, the type of the id is string | number | undefined.

One possible solution would be to convert id prop to the string and pass it down to the DateTimePicker component:

const DateInput: React.FC<IProps> = ({
  input,
  width,
  placeholder,
  meta: touched,
  error,
  id,
  ...props
}) => {
  return (
    <Form.Field error={touched && !!error} width={width}>
      <DateTimePicker
        id={String(id)}
        placeholder={placeholder}
        value={input.value || null}
        onChange={input.onChange}
        {...props}
      />
      {touched && error && (
        <Label basic color="red">
          {error}
        </Label>
      )}
    </Form.Field>
  );
};