Question 72702 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React does not include 'disabled' property for HTMLButtonElement type – Reactjs

I have a component defined as follows:

function ConfirmableButton(props: { onConfirm: () => void; } & HTMLAttributes<HTMLButtonElement>)

But when using it like
<ConfirmableButton disabled={disabledRows.includes(id)} />, it gives me error Property 'disabled' does not exist on type 'IntrinsicAttributes & { onConfirm: () => void; } & HTMLAttributes<HTMLButtonElement>'

What should I be using to make sure the typing is correct?

Tags:

2

Answers


  1. 0

    The generic type on HTMLAttributes<T> is only really there to give the specific element type to its event handlers. Checking the types, T in HTMLAttributes is only referenced where it extends DOMAttributes<T>, which is passed to each event handler to type the target property of the event object.

    To get <button>-specific attributes, you would need to use React’s ButtonHTMLAttributes<HTMLButtonElement> (which is the type React would use for a button element):

    interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
    autoFocus?: boolean | undefined;
    disabled?: boolean | undefined;
    form?: string | undefined;
    formAction?: string | undefined;
    formEncType?: string | undefined;
    formMethod?: string | undefined;
    formNoValidate?: boolean | undefined;
    formTarget?: string | undefined;
    name?: string | undefined;
    type?: 'submit' | 'reset' | 'button' | undefined;
    value?: string | ReadonlyArray<string> | number | undefined;
}
    Login or Signup to reply.
  2. 0

    You need to define the props for ConfirmableButton as follows:

    props: { onConfirm: () => void } & ButtonHTMLAttributes<HTMLButtonElement>

    This will let you use the component like this:

    <ConfirmableButton
  disabled={false}
  onConfirm={() => {
    console.log('Confirmed');
  }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search