Material-UI LinearProgress bar not working

Question

I have a simple file upload utility, for which I am using react-dropzone, and in conjunction to that I wanted to use material-ui LinearProgress bar to show the progress.

Answer 1

Complete example:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Dropzone from "react-dropzone";
import request from "superagent";
import { Line } from 'rc-progress';

class App extends Component {
  state = {
      completed: 0
  }

  onDrop = files => {
    this.setState({ completed: 0 });
    var data = new FormData();
    files.forEach(file => {
      data.append("files[]", file, file.name);
    });

    var req = request.post("http://localhost:3001");
    req.on('progress', event => {
      var percent = Math.floor(event.percent);
      if (percent >= 100) {
        this.setState({ completed: 100 });
      } else {
        this.setState({ completed: percent });
      }
    });

    const that = this;
    req.send(data);
    req.end((err, res) => {
      console.log("Successfully uploaded");
    });
  };

  render() {
    const divStyle = {
      border: '1px solid black'
    };
    return (
      

        
          
Try dropping some files here, or click to select files to upload. {this.state.completed}
          
        
      
    );
  }
}

ReactDOM.render(, document.getElementById("root"));