In React Typescript how to define type for ...rest parameter for native html elements?

Question

I'm trying to filter some props and then pass down the rest of the props to a native html element like so:

const Placeholder = (
  display: boolean,
  ...rest: Array<React.LabelHTMLAttributes<HTMLLabelElement>>
) => <label {...rest} />

The problem is that this is giving me this error:

Type '{ length: number; toString(): string; toLocaleString(): string; pop(): LabelHTMLAttributes<HTMLLabelElement> | undefined; push(...items: LabelHTMLAttributes<HTMLLabelElement>[]): number; ... 28 more ...; flat<U>(this: U[][][][][][][][], depth: 7): U[]; flat<U>(this: U[][][][][][][], depth: 6): U[]; flat<U>(this: U[]...' has no properties in common with type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'.ts(2559)

How would I define the types for the ...rest parameters for a native html element like a label in Typescript / React?

try Array<React.LabelHTMLAttributes<T>>

victor zadorozhnyy
– victor zadorozhnyy

2019-09-24 19:51:51 +00:00
Commented Sep 24, 2019 at 19:51 — victor zadorozhnyy
– victor zadorozhnyy, Commented Sep 24, 2019 at 19:51

skovy · Accepted Answer · 2019-09-24 20:48:48Z

10

The type of label is: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>

So relying on this, something like this should work:

interface Props
  extends React.DetailedHTMLProps<
    React.LabelHTMLAttributes<HTMLLabelElement>,
    HTMLLabelElement
  > {
  display: boolean;
}

const Placeholder = ({ display, ...rest }: Props) => <label {...rest} />;

const App = () => <Placeholder display htmlFor="form" />;

Also, note that since the first argument is props is being destructured as an object (so ...rest is the remaining props as an object), not as an array.

answered Sep 24, 2019 at 20:48

skovy

5,6502 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

Excellent. I frequently find myself on a quest to discover types like these.. how did you know exactly which types to use without a lot of trial and error?

skovy Over a year ago

Using Codesandbox or VSCode, hovering over the label in <label {...rest} /> will show you the types. Additionally, cmd + click on label (on macOS in VSCode) will open the type definitions.

Collectives™ on Stack Overflow

In React Typescript how to define type for ...rest parameter for native html elements?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related