CODEWITHSUNDEEP
reactjsreactstrap
cheslijones
cheslijones

Reputation: 9194

passing value to progress bar in React and Reactstrap

I've never used a progress bar, so I am trying to figure out by piecing together various sources and trying to get it to work with React and Reactstrap. This is what seemed to make sense to me, but it isn't working.

This is the documentation for reactstrap regarding <Progress />. Basically, it takes a value prop so I am trying to pass it to a method so it can be dynamically updated which in theory should make the progress bar move.

https://reactstrap.github.io/components/progress/

However, in my case the bar only updates to like 5%, but the console.log does update to 100.

Here is my component. What am I doing wrong here?

import React, { Component } from 'react';
import {
    Progress
} from 'reactstrap';

export default class SectionLoading extends Component {
    progressValue() {
        let width = 1;
        return setInterval(() => {
            if (width <= 100) {
                console.log(width);
                width++;
            }
        }, 10)
    }

    render() {
        return (
            <Progress value={this.progressValue()} />
        ); 
    }
}

Upvotes: 0

Views: 3367

Answers (2)

sambit
sambit

Reputation: 133

this.state = {
    loaded:0,
}

and

<React.Fragment>
  <Progress max="100" color="success" value={this.state.loaded} > 
   {Math.round(this.state.loaded,2) }%</Progress>
<React.Fragment>

Upvotes: 0

Kevin
Kevin

Reputation: 1319

I think the Progress value should take a number instead of a function. So, could you please try to change <Progress value={this.progressValue()} /> to <Progress value={this.state.width} /> and then in your progressValue function use this.setState({ width }) to update state.

Upvotes: 2

Related Questions