Search code examples
javascriptreactjsprogress-barant-design-pro

How can I edit the percent of progress bar in Ant design?

I am now using react js and importing the ant design progress component(see https://ant.design/components/progress/) But I fail to edit the percentage of the bar with javascript after it is displayed. I initiate it will this Html code.

<Progress id="progressBar" 

strokeColor={{from: '#108ee9', to: '#87d068'}}

percent={0}

status="active"/>

I tried to call progressBar.percent to edit but it does not work.

Solution

  • Just store your pecentage in useState

    const [percent, setPercent] = useState(0)

    and pass it to Progress:

    <Progress id="progressBar" 
strokeColor={{from: '#108ee9', to: '#87d068'}}
percent={percent}
status="active"/>

    and then simply call setPercent(50) to change your state.

    This is fundamental principe how to work with states in react. You can read more here