I have a <InputField> ponent in my app with the following type definition for the props:

interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
  customProp: string;
}

My ponent looks like this:

const InputField: React.FC<InputFieldProps> = ({ customProp, ...htmlProps }) => {

  return (
    <input {...htmlProps} />
  );
};

I would expect that I can now pass the prop disabled or required to that ponent, as these properties are part of the HTMLInputElement type definition. However, I get the error:

Property 'disabled' does not exist on type 'IntrinsicAttributes & Props'

I tried passing disabled as disabled={true} as well as just disabled with no success. I can, however, pass placeholder as a prop. So some properties in the HTMLInputElement type definition seem to work, while others don't.

I have a <InputField> ponent in my app with the following type definition for the props:

interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
  customProp: string;
}

My ponent looks like this:

const InputField: React.FC<InputFieldProps> = ({ customProp, ...htmlProps }) => {

  return (
    <input {...htmlProps} />
  );
};

I would expect that I can now pass the prop disabled or required to that ponent, as these properties are part of the HTMLInputElement type definition. However, I get the error:

Property 'disabled' does not exist on type 'IntrinsicAttributes & Props'

I tried passing disabled as disabled={true} as well as just disabled with no success. I can, however, pass placeholder as a prop. So some properties in the HTMLInputElement type definition seem to work, while others don't.

• javascript
• html
• reactjs
• typescript

1 Answer 1

Using React.InputHTMLAttributes<HTMLInputElement> is right. Just make sure any additional property, such as customProp, does not reach your input. In the below example, because customProp is destructed on its own, inputProps would include only input properties.

interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
  customProp: string;
}

const InputField: React.FC<InputFieldProps> = ({
  customProp,
  ...inputProps
}) => {
  return <input {...inputProps} />;
};