Object is possibly 'null'. TS2531 React with TypeScript

Question

I'm building a application with React and TypeScript ... When I try to .innerHTML or innerText something I got this error:

Object is possibly 'null'. TS2531

I'm new with TypeScript and I don't know what I should do, I know it's something related with interface ... but I can't find a specific resolve.

If someone can solve my problem with my code it would be great.

Thanks in advance . I let my code below:

const Home: FC = () => {
      const percentage = 91;
    
      const startingMinutes = 25;
      let time = startingMinutes * 60;
      const countdownEl = document.getElementById("countdown");
    
      const updateCountDown = () => {
        const minutes = Math.floor(time / 60);
        let seconds = time % 60;
        
        countdownEl.innerHTML=`${minutes}: ${seconds}`;
        time--;
      };
    
      const changeTimer = () => {
        var timer = document.getElementById("countdown");
        var time = document.getElementById("time");
    
        // timer.innerText=time;
      };

I agree with @David Remie, casting needs to be done. Also I think you are trying to refer the DOM element, even before it is mounted. Try accessing DOM element using a ref or in a useEffect or useLayoutEffect hook. — Shujath
– Shujath, Commented Sep 29, 2021 at 7:06

david-err · Accepted Answer · 2021-09-29 07:03:10Z

3

document.getElementById can theoretically return null if no element exists with the given id.

TypeScript is smart enough to see that you're not performing any validation before using a potential null object, i.e. countdownEl.innerHTML=`${minutes}: ${seconds};` .

There are 2 principal ways to fix this:

Guard your code with if (countdownEl) {} to ensure the respective code only gets executed when countdownEl is truthy.
Explicitly cast the result of document.getElementById if if should "always" return a non-null value, i.e. const countdownEl = document.getElementById("countdown") as HTMLElement;

answered Sep 29, 2021 at 7:03

david-err

1,0811 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pann · Accepted Answer · 2021-09-29 07:05:04Z

0

You only need to make sure that the the .innerText only runs when timer is not null, a simple if statement will do the trick. if(timer){timer.innerText = time }

answered Sep 29, 2021 at 7:05

pann

744 bronze badges

Comments

Krishnamoorthy Acharya · Accepted Answer · 2024-05-23 10:52:27Z

0

This will resolve the issue

const countdownEl = document.getElementById("countdown") as HTMLElement;

answered May 23, 2024 at 10:52

Krishnamoorthy Acharya

4,34440 silver badges35 bronze badges

Collectives™ on Stack Overflow

Object is possibly 'null'. TS2531 React with TypeScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related