CODEWITHSUNDEEP
javascriptreactjs
hightides1973
hightides1973

Reputation: 527

react progress bar not dynamic

I have used in my demo app an npm package "https://www.npmjs.com/package/@ramonak/react-progress-bar" for progressbar. I have an Websocket connection to server and client is trying to display the progress of the process running.

It displays me the percentage but the progress bar isn't dynamic (i.e. i want the progessbar to move according to the percentage value)

componentDidMount() {
    client.onmessage = (message) => {
      this.setState({data: JSON.parse(message.data)});
    };
  }

  render() {
    if(this.state.data && this.state.data.length >0){
      return(
        this.state.data.map(data => {
          var progress = "0%";
          if(data.progressReport && data.progressRep !== undefined){
            progress = data.progressRep;
          }
          return(          
          <div className="processlist">
                      <div className="processlist__entrydetail--progress">
                            <ProgressBar completed={progress}  labelAlignment={"center"}/>                   
                      </div>
          </div>);
        })
      );
    }
  }
}

css

.processlist{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    margin: 0 0.938rem;
    min-height: 0px;
    min-width: 0px;
  }
  .processlist__entrydetail--upsProgress {
        width: 15%;
 }

Current results are the width of progress bar is 100% and label value is only changing.

Upvotes: 0

Views: 1427

Answers (1)

Gulam Hussain
Gulam Hussain

Reputation: 1763

react-progress-bar component's completed props should be a number value. You are passing a string (eg. 15%).

Try parsing the string 15% to number 15 using parseInt function.

componentDidMount() {
    client.onmessage = (message) => {
        this.setState({ data: JSON.parse(message.data) });
    };
}

render() {
    if (this.state.data && this.state.data.length > 0) {
        return this.state.data.map((data) => {
            var progress = 0;
            if (data.progressReport && data.progressRep !== undefined) {
                progress = data.progressRep;
            }
            return (
                <div className="processlist">
                    <div className="processlist__entrydetail--progress">
                        <ProgressBar completed={parseInt(progress)} labelAlignment={"center"} />
                    </div>
                </div>
            );
        });
    }
    return "something else";
}

Upvotes: 1

Related Questions