title: Material UI linear progress animation when using data
body: <p>The docs at material ui for reactJS proposes this sample code for determinate progress bars.</p>
  
  <pre><code>export default class LinearProgressExampleDeterminate extends React.Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              completed: 0,
          };
      }
  
      componentDidMount() {
          this.timer = setTimeout(() =&gt; this.progress(5), 1000);
      }
  
      componentWillUnmount() {
          clearTimeout(this.timer);
      }
  
      progress(completed) {
          if (completed &gt; 100) {
              this.setState({completed: 100});
          } else {
              this.setState({completed});
              const diff = Math.random() * 10;
              this.timer = setTimeout(() =&gt; this.progress(completed + diff), 1000);
          }
       }
  
       render() {
          return (
              &lt;LinearProgress mode="determinate" value={this.state.completed} /&gt;
          );
       }
  }
  </code></pre>
  
  <p>This creates a loading animation until bar is full. I am trying to modify it to use data from a json file so that it stops at the value that I specified for it in each json item. I am getting that part right. That was the easy part. But the animation fails because the animation is scripted using the value of <code>completed</code> in the constructor's state. And it is also located outside of my data.map so I can seem to find the way to make it read the value in the json file so it can se it for it's timeout function. :( </p>
  
  <p>This is what I have (reduced)</p>
  
  <p>JSON</p>
  
  <pre><code>exports.playerItems = [
      {
          id: 283,
          completed: "100",
      }
      {
          id: 284,
          completed: "70",
      }
      {
          id: 285,
          completed: "20",
      }
  
      ...
  
      {
          id: 295,
          completed: "50",
      }
  ]
  </code></pre>
  
  <p>Data injection</p>
  
  <pre><code>import PLAYERS from 'data/players.js';
  const playersData = PLAYERS['playerItems'];
  </code></pre>
  
  <p>And my table is mapped</p>
  
  <pre><code>&lt;Table&gt;
     {playersData.map((row, index) =&gt; (
         &lt;TableRow id={row.name} key={index}&gt;
             &lt;TableRowColumn&gt;
  
                  &lt;LinearProgress
                      mode="determinate"
                      value={row.completed} /&gt;
  
              &lt;/TableRowColumn&gt;
         &lt;/TableRow&gt;
     ))}
  &lt;/Table&gt;
  </code></pre>
  
  <p>How can I modify the progress() function so that it animates the value given to the LinearProgress? </p>
  
  <p>Thanks in advance</p>