Using React with Typescript I am trying to do the simple thing, that is iterate through a collection of object and based on each of those – create an instance of custom component.

Given that I’m using map function, i do get the index so I’m using this as key.

Problem: getting a red squigly when setting key with message:

Type ‘{ imageSource: string; target: string; title: string; hasGap:
boolean | undefined; key: number; }’ is not assignable to type
‘IntrinsicAttributes & { hasGap?: boolean | undefined; imageSource:
string; title: string; target: string; disabled?: boolean | undefined;
} & { children?: ReactNode; }’. Property ‘key’ does not exist on
type ‘IntrinsicAttributes & { hasGap?: boolean | undefined;
imageSource: string; title: string; target: string; disabled?: boolean
| undefined; } & { children?: ReactNode; }’.ts(2322)

Now in my understanding, key property should exist by default on every React component so I do not understand where’s that error coming from…

Example of a simple component:

const MissingKeyComponent = () => {
  return(
    <div>Key cannot be passed when creating this component</div>
  )
}

<MissingKeyComponent key={100}></MissingKeyComponent>

In real life example code runs well, browser does not show any errors, as well as Vite output…

If i remove the key, browser shows standard error about missing key when creating list of components.