title: Dynamically Change Bootstrap Progress Bar Value in react
body: <p>First of all, apologise if I couldn't explain properly. Please do comment so I can explain again if something missing. Will really appreciate any kind of help </p>
  
  <p>I am trying to implement a bootstrap progress bar dynamically in my react upload component while send a post request by using axios.</p>
  
  <p>At the moment what I implement it's directly going to 95 per cent and then done</p>
  
  <p>But I am looking to implement like this example: </p>
  
  <p><a href="https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&amp;file=dynamically-change-bootstrap-progress-bar-value" rel="nofollow noreferrer">https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&amp;file=dynamically-change-bootstrap-progress-bar-value</a></p>
  
  <p>my full component will be found here: <a href="https://jsfiddle.net/7mgtkub3/" rel="nofollow noreferrer">https://jsfiddle.net/7mgtkub3/</a></p>
  
  <pre><code>
   sendRequest(file) {
      return new Promise((resolve, reject) =&gt; {
        const dataForm = new FormData();
        dataForm.append("datafile", file, file.name);
        var self = this;
        self.setState({
          uploadProgress: 95
        });
        axios
          .post(
            `/api/dataset/${this.props.spreadSheetData._id}/upload`,
            dataForm,
            {
              headers: {
                "Content-Type": "multipart/form-data"
              }
            }
          )
          .then(function(response) {
            self.setState({
              uploadProgress: 100
            });
            //console.log("SUCCESS!!");
            self.props.formSubmitted(response.data, 3);
            let filesToUpload = self.state.filesToUpload.slice();
            filesToUpload = filesToUpload.filter(fileObj =&gt; {
              return fileObj.name !== file.name;
            });
            self.setState({
              filesToUpload: filesToUpload
            });
            let toastMsg = {
              msg: file.name + " is uploaded successfully",
              className: "lobibox-notify-success"
            };
            notify(toastMsg);
          })
          .catch(function() {
            //console.log("FAILURE!!");
            self.setState(
              {
                uploadState: "Error"
              },
              () =&gt; {
                let toastMsg = {
                  msg: file.name + " is not uploaded",
                  className: "lobibox-notify-error"
                };
                notify(toastMsg);
              }
            );
          });
      })
        .then(response =&gt; {})
        .catch(err =&gt; {
          console.log(err);
        });
    }
  
    &lt;div className="Content"&gt;
              {this.state.uploadProgress &gt; 0 ?  &lt;ProgressBar
                 // now={uploading}
                 // label={`${uploading}`}
                 now={this.state.uploadProgress} 
                 label={`${this.state.uploadProgress}%`}
                  animated now={this.state.uploadProgress}
                /&gt; : ""}
  
  </code></pre>