In this article, we’ll talk about the error “Argument type ‘HTMLElement or null’ not assignable to parameter type ‘Element or DocumentFragment'” in React. To fix it you can use the non-null assertion or type assertion. Let’s see what it is and figure out the most effective solution.
The cause of error “Argument type ‘HTMLElement or null’ not assignable to parameter type ‘Element or DocumentFragment'”
You get the “Argument type ‘HTMLElement or null’ not assignable to parameter type ‘Element or DocumentFragment” error because there is an asynchrony between the type of the result returned by document.getElementById() method and the parameter of createRoot() method.
The document.getElementById() returns HTMLElement or null value. Otherwise, createRoot() requires an input parameter of Element or DocumentFragment.
To illustrate, here is an example:
import App from './App';
import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);Error:
Copy the above code to your computer, you will see this error in the line: const root = createRoot(document.getElementById('root'));
Solutions for this error
I will show you two ways to fix this problem quickly and easily. Let’s see what those ways are.
Use the non-null assertion (“!”)
The first method introduced here is to use the non-null assertion (“!“).
The non-null assertion removes null and undefined from a specified type without actually performing a specific type check.
Apply to the original example to fix the error:
import App from './App';
import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root')!);
root.render(<App />);By using the non-null assertion, now the return value of method document.getElementById() will only be HTMLElement instead of HTMLElement | null.
Use the type assertion
Another approach for you, use the type assertion (as keyword) to tell TypeScript about the type of a particular value that TypeScript doesn’t already know.
Apply to the original example to fix the error:
import App from './App';
import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root') as Element);
root.render(<App />);Take a look at the error message again. We know that the parameter type of the function must be Element | DocumentFragment.
With type assertion, TypeScript will be informed that our root object will be of type Element. It doesn’t need to worry about null values or some values that will create incompatibility between the passed-in argument and the required parameter type of the method.
Summary
The “Argument type ‘HTMLElement or null’ not assignable to parameter type ‘Element or DocumentFragment'” error has been solved. I hope the information in this article was useful to you. Thanks for reading!
Maybe you are interested:
- Import Aliases When Importing Components
- Set and Access state using a Dynamic key in React
- How To Get An Element By ID In React
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js