Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.ts(2345)

reactjs typescript react-dom
kishore picture kishore · Aug 21, 2020 · Viewed 7.2k times · Source

I have index.html

<body>
    <div id="portal"></div>
    <div id="root"></div>
</body>

and want to use the component below in separate portal div than root div,

import React from 'react';

const portalDiv = document.getElementById('portal');

function Portal1(props) {
  return ReactDOM.createPortal(
    <div>
      {props.children}
    <div/>, 
  portalDiv); //here
}

export default Portal1;

But I am getting this error, Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'. Type 'null' is not assignable to type 'Element'.ts(2345) in VScode.

I am using Typescript. Please help.

Answer

Titulum picture Titulum · Aug 21, 2020

Other people have answered that you should add a null-check, but Typescript also has a non-null assertion that you can use when you are sure that the value is never null by adding the ! operator to the end of your statement:

const portalDiv = document.getElementById('#your-element')!;

Related questions

How to render a React component (ES6 API) directly using ReactDOM?

I'm using the ES6 classes API of React (by using TypeScript) and want to render a subtyped class of type React.Component using ReactDOM.render(). The following code works: class MyComponentProps { someMember: string; } class MyComponent extends React.Component<MyComponentProps, {}&…

Read More
TypeScript and ReactDOM.render method doesn't accept component

TL;DR I'm using TypeScript and React. I've defined my AppContainer.tsx component, exported it as default. I'm consuming this in the file app.ts where ReactDOM lives to render it to the targetted dom element. But there I receive …

Read More
Typescript input onchange event.target.value

In my react and typescript app, I use: onChange={(e) => data.motto = (e.target as any).value}. How do I correctly define the typings for the class, so I wouldn't have to hack my way around the type system …

Read More