Invalid left-hand side in assignment expression while trying to modify style

Question

So here is my code, it is a circular progress bar component, and I'm trying to animate the progress but the code return : Error: cannot read properties of null. for the style, background, and innerText. when I use the method chaining sign ".?" it returns : Error: Invalid left-hand side in assignment expression can someone help me with my code, please?

import React, { Component } from 'react'

class ProgressBar extends Component {


  render() { 

      const progressContainer = document.querySelector('.progress-container');
      const valueContainer = document.querySelector('.progress-value');
      const speed = 400;
      let progressValue = 0;
      let progressEndValue = 70;
      const createProgress = setInterval(() => {
          progressValue++;
        valueContainer?.innerText = `${progressValue} %`
        progressContainer?.style?.background = `conic-gradient(
            rgb(239 68 68) ${progressValue * 3.6}deg,
            black 1deg,
            rgb(241 245 249) 1deg,
        )`
        if (progressValue == progressEndValue) {
            clearInterval(createProgress);
        }
    }) 

    return (
      <div className='progress progress-container w-full h-full rounded-full flex justify-center items-center'>
        <div className="progress progress-value w-3/4 h-3/4 rounded-full bg-slate-100 flex justify-center items-center">
            <h1>0 %</h1>
        </div>
      </div>
    ) 
  }
}


export default ProgressBar;

score 0 · Answer 1 · answered Jan 02 '23 at 20:21

0

It's not possible to use optional chaining when assigning a property. Removing the ? fixes the error although you may want to add a null check before setting those properties.

  valueContainer.innerText = `${progressValue} %`;
      progressContainer.style.background = `conic-gradient(
            rgb(239 68 68) ${progressValue * 3.6}deg,
            black 1deg,
            rgb(241 245 249) 1deg,
        )`;

answered Jan 02 '23 at 20:21

JEEngineer

136
8

can you tell me how ? – islam gueniari Jan 03 '23 at 12:27
I'd recommend using refs to access those dom elements instead of vanilla js. Check out this post: https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele – JEEngineer Jan 03 '23 at 16:05
I am using class component, is there any alternative choice? – islam gueniari Jan 03 '23 at 16:36
Yes you can: https://reactjs.org/docs/refs-and-the-dom.html#creating-refs although I'd recommend using functional components and hooks. – JEEngineer Jan 03 '23 at 16:51

Invalid left-hand side in assignment expression while trying to modify style

1 Answers1