Typescript not recognizing HTML property

Question

I'm using TypeScript in my Vite React project. I'm having problems to build my project because of this error, says that the name property doesn't exist. Someone know how I can fix that?

Type '{ children: Element; name: string; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'name' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

The code

<div
  name='contact'
  className='w-full h-screen bg-dark text-white flex justify-center items-center p-4'
>
  ...
</div>

It's to use a Link componet from react-scroll. It need the name as reference. — Carlos Curcino, Feb 09 '23 at 14:22
Then you should use `react-scroll`'s `Element` component instead — HTMHell, Feb 09 '23 at 14:31

score 1 · Answer 1 · answered Feb 10 '23 at 18:55

The property name does not exists on a HTMLDivElement

Instead you can use the Element from react-scroll

import { Element } from "react-scroll";

<Element name="contact" className="w-full">
  Scroll to this element
</Element>;

or if you want to scroll to your own element e.g. div, you can use a id

<div
  id="contact"
  className="w-full h-screen bg-dark text-white flex justify-center items-center p-4"
></div>

Typescript not recognizing HTML property

1 Answers1