How do you use "name" attribute in React?

Question

My Environment

TypeScript ReactJS

The error I am receiving when attempting to use name as an attribute.

Type '{ name: string; "data-id": string; "data-type": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'. Property 'name' does not exist on type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'

My current code that is throwing the error:

<div name="termly-embed" data-id="**************************" data-type="iframe"></div>

Answer 1

Since name property does not exist, it is custom so you can use data- attributes. Try to change it with data-name

<div data-name="termly-embed" data-id="**************************" data-type="iframe"></div>

or if you want to use just name without adding data, you should do this modification in your index.d.ts

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // For extending React's HTMLAttributes
    custom?: string;
  }