Problem while trying to update style of a Jsx element-CodePudding

import React, { Component } from 'react'

class ProgressBar extends Component {


  render() { 

      let progressContainer = document.querySelector('.progress-container');
      let valueContainer = document.querySelector('.progress-value');
      const speed = 20;
      let progressValue = 0;
      let progressEndValue = 70;

      function updateElements() {
        valueContainer = document.querySelector('.progress-value');
        progressContainer = document.querySelector('.progress-container');
      }

      const createProgress = setInterval(() => {
        progressValue  ;
        updateElements();
        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);
        }
    }, speed) 

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


export default ProgressBar;

So here is my code, I am basically trying to create a dynamic animated circular progress bar here. I use updateElements function to prevent the uncaught error of null, the progress value is changing between 0 and 70 percent successfully in the DOM. but the conic-gradient background does not applying in the DOM from the function. but if I set it statically in the CSS file with the same code. it works.

Someone help me please I am struggling since yesterday!!

CodePudding user response：

import React, { Component } from 'react'

class ProgressBar extends Component {
    state={
        progressValue:0,
        speed:20,
        progressEndValue:70
    }

  render() { 

      let progressContainer = document.querySelector('.progress-container');
      let valueContainer = document.querySelector('.progress-value');

      function helperFunctions() {
        valueContainer = document.querySelector('.progress-value');
        progressContainer = document.querySelector('.progress-container');
        
      }

      const createProgress = setInterval(() => {
        if (this.state.progressValue <= this.state.progressEndValue) {
            this.setState({progressValue:this.state.progressValue 1});
            helperFunctions();
            valueContainer.innerText = `${this.state.progressValue} %`
            progressContainer.style.background = `conic-gradient(rgb(239 68 68) ${this.state.progressValue * 3.6}deg,black 1deg,rgb(241 245 249) 1deg)`        
     
        } else {
            clearInterval(createProgress);
        }
        
    }, this.state.speed) 

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

export default ProgressBar;

Now it works fine :)

suggestion:

If your were using functional component, it could be done much easier and you could use useRef intead of document.querySelector as it is recomanded is React document

The main problem was the last , in conic-gradient