title: reactjs google-distance-matrix updating component
body: <p>I am super new to reactjs an am pretty junior.  </p>
  
  <p>I am playing around the google distance matrix api.  user inputs origin and destination on the form and the event handler passes the values into the matrix function but within the function it cannot update the state variables.  </p>
  
  <p>Any thoughts? </p>
  
  <pre><code>import React from 'react';  
  import GoogleMap from 'google-distance-matrix';
  class SimpleForm extends React.Component {
  constructor(props) {
      super(props);
      this.state = { 
          address: '', 
          dest:'', 
          distanceText:'testing the distance text' 
      }
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
  
      this.onChange = (address) =&gt; this.setState({ address });
      this.changeDest = (dest) =&gt; this.setState({dest});
  }
  handleFormSubmit = (event) =&gt; {
      event.preventDefault()        
      GoogleMap.matrix(this.state.address, this.state.dest, function (err, distances) {
          if (err) {
              return console.log(err);
          }
          if(!distances) {
              return console.log('no distances');
          }
          if (distances.status == 'OK') {
              if(distances.rows[0].elements[0])  {
                  var distance = distances.rows[0].elements[0].duration['text'];
                  this.setState({
                      foundDistance: true, 
                      distanceText: distance
  
                  }); 
              }
          } 
      });
  
  }
  </code></pre>