React JS Google Maps Distance Matrix Error: Uncaught TypeError: locations.join is not a function at formatLocations (index.js:45)

Question

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

I'm trying to implement Google Distance Matrix to get the distance.

(If there are any pre-built reactjs alternative solution, please let me know)

My 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) => {
    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 (
      <div>
        <button onClick={this.handleFormSubmit}>Hello </button>

      </div>
    )
  }
}

export default View;

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:

Uncaught TypeError: locations.join is not a function at formatLocations (index.js:45) What the error gives me:

Answer 1

The error is emanating from your handleFormSubmit function when you call GoogleMap.matrix, it should look like this:

  handleFormSubmit = (event) => {
    const component = this
    // const { address, dest } = this.state
    let address = ["Toronto, ON, CA"];
    let dest = ["Vancouver, ON, CA"];

    event.preventDefault()
    // console.log(event)
    GoogleMap.matrix(address, dest, function (err, distances) {

Notice the brackets for Toronto and Vancouver; the package expects those two arguments to be arrays, not strings