title: React JS Google Maps Distance Matrix Error: Uncaught TypeError: locations.join is not a function at formatLocations (index.js:45)
body: <p>I'm not sure if this is a bug so I'm going to ask for advice first since I'm very new to ReactJS</p>
  
  <p>I'm trying to implement Google Distance Matrix to get the distance. </p>
  
  <p><strong>(If there are any pre-built reactjs alternative solution, please let me know)</strong></p>
  
  <p>My Code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import GoogleMap from 'google-distance-matrix';
  //...
  class View extends Component {
    state = {
      //...
      address:'',
      dest: '',
      distanceText:'',
      openModal: false,
      foundDistance: false,
      distanceText: "",
      address: "New York NY",
      dest: "Montreal"
  
    };
    constructor (props){
      super(props)
      this.searchUpdated = this.searchUpdated.bind(this);
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
  
    }
  
    handleFormSubmit = (event) =&gt; {
      const component = this
      // const { address, dest } = this.state
      let address = "Toronto, ON, CA"
      let dest = "Vancouver, ON, CA"
      let origins = ['San Francisco CA', '40.7421,-73.9914'];
      let destinations = ['New York NY', 'Montreal', '41.8337329,-87.7321554', 
      'Honolulu'];
  
      event.preventDefault()
      // console.log(event)
      GoogleMap.matrix(address, dest, function (err, distances) {
          distance.key('AIzaSyCFKLGuYz6ffYby7U-ODjFtV5TO4nDyevE');
          distance.units('imperial');
          console.log("address");
          console.log(dest);
          console.log(err);
          console.log(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'];
                  console.log(distance);
                  component.setState({
                      foundDistance: true,
                      distanceText: distance
                  });
              }
          }
      }).bind(this);
  }
  
    componentWillMount() {
      //...
    }
    componentDidMount () {
        // ...
    }
    render() {
  //...
      return (
        &lt;div&gt;
          &lt;button onClick={this.handleFormSubmit}&gt;Hello &lt;/button&gt;
  
        &lt;/div&gt;
      )
    }
  }
  
  export default View;
  </code></pre>
  
  <p>I literally just want to console.log() the distance between two locations but I'm unable to do so... Right now, it's giving me this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: locations.join is not a function
        at formatLocations (index.js:45)
    What the error gives me:
    <a href="https://i.stack.imgur.com/mm68B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mm68B.png" alt="enter image description here"></a></p>
  </blockquote>