93

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.

Hari Kishore
  • 2,201
  • 2
  • 19
  • 28
  • Hi, you should change the accepted answer? – kakabali Apr 24 '22 at 02:53
  • @kakabali Accepted answer needn't always be the one with highest score, right? The one I've accepted was the first one to answer and get me out of stuck. so thanks for suggestion. I've also upvoted all the answers on this, since all are useful. – Hari Kishore Apr 24 '22 at 18:43
  • 1
    Yes the highest one is the most relevant and should be accepted now – kakabali Apr 25 '22 at 02:38

10 Answers10

224

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')!;
Titulum
  • 9,928
  • 11
  • 41
  • 79
  • 2
    Yeah, good one indeed. (for added info, some time, typescript, probably latest, suggest to use `?` at same place instead of `!`. works fine. – Hari Kishore Jan 29 '21 at 08:01
  • ! back at ya! I don't know if the above if () {} solutions were possible in my case (maybeI just don't know how) as the jsx library (react-modal) expects a callback returning an html element, not the element directly, so I don't know at what point I could have done the check and got TS to recognize it. So glad you shared. I just wanna know if/when I'd be abusing some escape hatch like this. I wanna be a user not an abuser but maybe this is why they created it. – gcr Mar 10 '21 at 07:00
  • Well, take a look at [this example](https://www.typescriptlang.org/play?#code/MYewdgzgLgBAlhAciKiCuAbDMC8MA8AKgDQB8AFAG4CGGaApgFwyEwA+MaYAJvQGZww9bgEpcpGAG8AUDDkwATvShoFYGAEINNOvQDc0gL7TpoSLADmygGq0GAST7JUmDAHkFhABYKQAd1wCEgodBmZWDi5eASFRGHDxKVl5OD4YcgRndCwqO3oRMRl5YsVlVXVQ+g0DYuNiqB9-GCEAgFEFXwVyAHJK+Ahm126RA0MgA). The `!` check on line 7 is required, because typescript is not 'smart' enough to see that you already checked whether the value is not null in another function. – Titulum Mar 10 '21 at 07:10
  • kind of a noob to this operator, can you link docs page for this? – DinoSaadeh Mar 25 '22 at 12:53
  • @DinoSaadeh https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator – Titulum Mar 25 '22 at 13:34
  • 1
    You should delete ```#``` from your selector. – Hooman Limouee Jan 25 '23 at 12:10
  • 1
    Wow I can't believe nobody mentioned this already. Thank you @Hooman, updating the response. – Titulum Jan 27 '23 at 09:46
61

So I dont know if anyone is still having this problem but there's an easier and straightforward solution to this. simply declare the modal element with "as" keyword
const modalRoot = document.getElementById("modal-root") as HTMLElement; This removes the error. I suggest looking through this great react-typescript cheatsheet.
https://github.com/typescript-cheatsheets/react

Oluwaseyitan Baderinwa
  • 857
  • 7
  • 8
  • yeah, that might work, but we call that as inline typecasting, i.e., we're just changing type in place. still I feel, if there is null values, that is, if the div doesn't exist, it will still give null. and the typecasting null as HTMLElement might give error. did you try applying changes? – Hari Kishore Feb 25 '21 at 07:27
  • 1
    I did apply it and it seemed to be the only way to fix the error. And the cheatsheet gives more details as to why this method is recommended. Btw, the HTMLElement type is Element|null type so I don't think it'll give an error. I already tested it – Oluwaseyitan Baderinwa Feb 26 '21 at 10:47
27

When we select an HTMLElement inside a DOM Tree using getElementById it returns the Element within the document that matches the specified selector, if no match is found it basically returns null.

Let's get the portal element:

let portalDiv = document.getElementById("portal");

If the portal exists in the DOM tree it will return the HTMLElemnt in case of not found it returns null.

So the return type of getElementById is HTMLElement | null, since the 2nd argument of the ReactDom.createPrortal(children: ReactNode, element: HTMLElement, id: string) is strictly HTMLElement we have to caste our portalDiv to HTMLElement inorder to get rid of the warning.

Since we are sure that the portalDiv do exists we can use this method to deal with the null conditions.

let portalDiv = getElementById("portal") as HTMLElement;

now we can use portalDiv without getting any errors:

function Portal1(props) {
  return ReactDOM.createPortal(
    <div>
      {props.children}
    <div/>, 
  portalDiv);
}
Biswarup Bouri
  • 271
  • 3
  • 3
12

Since getElementById possibly returns null. So you just simply check before using like:

function Portal1({ children }) {
  return portalDiv ? ReactDOM.createPortal(<>{children}</>, portalDiv) : null;
}
tmhao2005
  • 14,776
  • 2
  • 37
  • 44
7

getElementById can return null, but createPortal doesn't accept null.

If you know the portal div will exist, make the code explicit about that:

const portalDiv = document.getElementById('portal');
if (!portalDiv) {
    throw new Error("The element #portal wasn't found");
}

That will allow TypeScript to narrow the type of the constant, removing the | null part of the type. It also gives you a nice proactive warning if someone changes things such that the div isn't there when this code runs anymore.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
2

I think the best solution to this is not to make it either null or HTMLDIVElement but rather in the use-case try to let typescript know that the DivElement might be empty at the moment, but you will take responsibility of it by just using "!" symbol.

Code sample below:

import React, {useEffect} from 'react';
import ReactDOM from 'react-dom';
import './modal-portlet.style.scss';

const modalRoot = document.getElementById('modalRoot');

type Props = {
  children: JSX.Element;
};
const ModalPortlet: React.FC<Props> = ({children}): JSX.Element => {
  const divContainer = window.document.createElement('div');
  divContainer.setAttribute('class', 'modal-container');

  useEffect(() => {
    /**********
     * immediately the component mount append @divContainer as the childNode of @modalRoot in the DOM
     **********/
    modalRoot!.appendChild(divContainer);

    return () => {
      modalRoot!.removeChild(divContainer);
    };
  });

  /************
   * return the createPortal api that takes the children(JSX) and inject it into @divContainer which is already a childNode of @modalRoot
   ************/
  return <>{ReactDOM.createPortal(children, divContainer)}</>;
};

export default ModalPortlet;
Emmanuel Onah
  • 580
  • 4
  • 8
2

There is simple solution just add as HTMLAudioElemnt at the end of get Element by ID const element = document.getElementById(auduiId) as HTMLAudioElement;

Sahas Jaiswal
  • 21
  • 2
1

If you are switching React.js files from Javascript to Typescript using node.js, this should be the fix code for you in index.ts, line 8:

const root = ReactDOM.createRoot(document.getElementById('root')!);
Archie Butler
  • 455
  • 6
  • 20
0

I was also facing same error so I tried few different ways but the one that worked for me is handling null condition i.e. const portalDiv = document.getElementById('portal')!;

Priyanshu Jain
  • 9
  • 1
-2

For a quick fix just add "strictNullChecks": false to your tsconfig.json file.

Moonsoon
  • 1
  • 3