CODEWITHSUNDEEP
reactjstypescript
Adeola
Adeola

Reputation: 108

checked doesn't exist on HTMLAttributes<HTMLInputElement>

Please, I don't know why this is not working. It's practically telling me that "checked" doesn't exist on the input element.

interface RadioProps extends HTMLAttributes<HTMLInputElement> {
  size?: "xs" | "sm" | "md" | "lg";
}

const RadioInput = (props: RadioProps) => <Wrapper size={size}>
  <input id={id} {...props} type="radio" />
  <label htmlFor={props.id || id} size={size}></Label>
</Wrapper>

const App = () => <RadioInput checked={checked} />

// Error: Property 'checked' does not exist on type 'IntrinsicAttributes & RadioProps'

Upvotes: 0

Views: 1101

Answers (1)

Javlonbek
Javlonbek

Reputation: 76

instead of

HTMLAttributes<HTMLInputElement>

you can use

React.DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>

in this case, your custom interface for your component will be like this

    interface RadioProps extends React.DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
        size?: "xs" | "sm" | "md" | "lg";
    }

Upvotes: 2

Related Questions