#How do you deal with possible null object and querySelector?

37 messages · Page 1 of 1 (latest)

solar zephyr
#

I have the following code snippet:

const userLogin = someVar.current; // this can be null at some point
const userField = userLogin.querySelector("#some-id");

I am using Jetbrains Webstorm and it is complaining because userLogin can be null which is true but ... if I do:

userLogin?.querySelector("#some-id");

then it complains because querySelector does not exists on type never I have tried putting everything in a condition and check if userLogin is not null but the result is the same querySelector does not exists on never can I get some ideas for how to get this right?

night summit
#

Do you get the same error if you type check with tsc?

solar zephyr
#

what do you mean? I am kind of new to ts and react heh

night summit
#

How did you make your project?

solar zephyr
#

no ideas tbh, I am working in a project started by someone else

#

the linter does not work either same issue with the possible null on that property

night summit
#

Check your package.json, there should be a type check script in there that calls tsc.

#

Run that script and see what TS errors are reported (ignore linter/formatter errors for now)

solar zephyr
#

I don't see anything like that, could you post an example of what package should I be looking at? I just search tsc and nothing popup

#

okay found it npx tsc

#

error TS2339 Property 'querySelector' does not exists on type 'never'

night summit
#

In your package.json, it should have something that looks like:

{
    "scripts": {
        "type-check": "tsc -p .",
        // other scripts
    },
    // other stuffs
}
#

What's the type of userLogin?

solar zephyr
#

const userLogin = useRef(null);

#

the ref is used in an input text type

night summit
#

Well you need to give it a type, otherwise how would TS know what type it is?

solar zephyr
#

well I am learning TS 🙂 what type would you use there?

night summit
#

Possibly:

const userLogin = useRef<HTMLInputElement>(null)
solar zephyr
# 
const userLogin = useRef<HTMLInputElement>(null);

useEffect(() => {
    const userLoginHtml = userLogin.current;
    const userLoginInputField = userLoginHtml!.querySelector("#some-id")
    userLoginInputField.focus()
}, []);

the original error is gone however now I am fighting with this other one:

error TS2339: Property 'focus' does not exists on type 'Element'
should not be userLoginInputField an HTMLInputElement type?

night summit
#

No that's not what Element#querySelector does.

#

You can very well select an element that doesn't have focus method.

solar zephyr
#

so the solution could be userLoginInputField: HTMLInputElement?

#

because I tried and it did not work, same error with the focus not existing

night summit
#

Why not just use a ref to bind directly to whatever element you want to focus, rather than querying?

solar zephyr
#

that exactly what I am doing ...

# 
<input type="text"
 name="input"
 id="some-id"
 ref={userLogin}
 ...
/>

maybe my useRef method is not correct as I said still learning, I am open to ideas

night summit
#

Are you just trying to focus on that input?

solar zephyr
#

yes sir

night summit
#

Then you don't need to query anything.

#

Just userLoginHtml.focus()

solar zephyr
#

let me try 🙂 thanks for the hint

night summit
#

Which also happens to be focusing an input element.

solar zephyr
#

it did not work by just using your suggestion

#

it worked tho with the querySelector tho

#

let me find some help in a the React slack (not sure if there is a channel here on TS Discord)

night summit
#

There's a React Discord in #directory