What's the type of the following statement in React?

let element = <div>Blah blah</div>

I thought I could use element: HTMLElement but when I do, I get Property 'accessKey' is missing in type 'Element'.

What about another imported ponent?

import Row from './partials/Row';
let row = <Row cols={cols} />

What's the type of the following statement in React?

let element = <div>Blah blah</div>

I thought I could use element: HTMLElement but when I do, I get Property 'accessKey' is missing in type 'Element'.

What about another imported ponent?

import Row from './partials/Row';
let row = <Row cols={cols} />

• javascript
• reactjs
• typescript

1 Answer 1

The type for the div jsx element is HTMLFactory<HTMLDivElement>.

The reference you have isn't for an actual dom element in the browser but for a react element which represent such an element which might not be rendered yet.

The html properties should be accessed through the props:

let element = <div>Blah blah</div>
console.log(element.props.accessKey);

If you'd like to get the dom element you can use the ref attribute:

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument

So:

let divElement: HTMLDivElement;
let element = <div ref={ (el) => { divElement = el; console.log(el); } }>Blah blah</div>

In the case of the imported Row, again, you have a reference to a react element which has a dom representation.
Which properties or methods it has depends on the class itself.