Progress Bar:
state = {
progress: 0,
}
render() {
return (
<Progress value={this.state.progress} title="Saving the details"/>
);
This is my progress bar, i want this progress bar to increase dynamically with the interval of time. Can anyone help me with that?
Here you go :
componentDidMount() {
let counter = 1;
const interval = setInterval(() => {
counter++;
this.setState({
progress : counter
})
if(counter == 100) {
clearInterval(interval);
}
}, 100);
}
You can run the below code snippet and review :
const { useState , useEffect } = React;
class App extends React.Component {
state = {
progress : 0
}
componentDidMount() {
let counter = 1;
const interval = setInterval(() => {
counter++;
this.setState({
progress : counter
})
if(counter == 100) {
clearInterval(interval);
}
}, 100);
}
render() {
return (
<div>
Progress : { this.state.progress }
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react-root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>it's right. just use this code:
setInterval(() => {
this.setState((prevState) => ({progress: prevState.progress + 10}))
}, 5000)
you can write this every where you want. like componentDidMount or in a custom function.
