React-google-maps: How do we access Polygon properties?

[Falconerd]

I'm trying to get the paths from a polygon after moving it with the drawing manager. Perhaps I'm going about this the wrong way?

Example:

...
<Polygon
  ...
  onDragEnd={polygon => console.log(polygon.getPaths())}
 ...
/>

// => polygon.getPaths is not a function

I'm going off these docs https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon

I can see that there's a latLng property with #lat() and #lng() but that doesn't make sense to me as it's just one pair.

Update 2017/8

My old solution is outdated and has unnecessary steps. This solution has the preferred refs format as well as no wrapper component.

<Polygon
  ...
  ref={(ref) => { this.ref = ref; }}
  ...
  onClick={() => console.log(this.ref.getPaths())}
  ...
/>

If you are using Polygon components inside a loop/map, make sure to assign each ref to a unique ID. Here's a snippet from my own project.

...
    {turfs.map((turfId) => {
      const { paths, id, color, users, editable, clickable } = turfsById[turfId];
      return (
        <Polygon
          ref={(ref) => { this[id] = ref; }}
          paths={paths}
          key={id}
          id={id}
          users={users}
          editable={editable}
          clickable={clickable}
          options={{
            fillColor: color,
            strokeColor: color,
            strokeWeight: 1,
          }}
          onClick={() => onPolygonClick(this[id])}
        />
      );
    })}
...

Below is old code, kept as how not to write refs

Update:

I've come up with a solution. Unsure if it's the best way.

First, create a wrapper for the Polygon class, so that it can use refs.

class PolygonWrapper extends React.Component {
  ...
  render() {
    return (
      <Polygon
        ...
        ref='polygon'
        onDragEnd={() => this.props.onDragEnd(this.refs.polygon)}
        ...
      />
    );
  }
}

Then, use the wrapper instead of a normal polygon, passing all the necessary props through.

...
// Rendering somewhere and passing down props
<PolygonWrapper
  ...
  paths={somePaths}
  onDragEnd={this.props.onPolygonDragEnd}
/>
...

// Wherever onPolygonDragEnd is defined
...
onPolygonDragEnd = (polygon) => polygon.getPaths()
// => Works as intended!
...

[hlthi]

Thanks @Falconerd .

Sample usage after access polygon

// handlePath(polygon)
// https://developers.google.com/maps/documentation/javascript/reference/3.exp/polygon#Polygon
 handlePath = (polygon) => {
    // If you use single polygon
    polygon.getPath().forEach((latlng, index) => {
      // for latlng read that https://developers.google.com/maps/documentation/javascript/reference/3.exp/coordinates#LatLng
     console.log(latlng.lat() + " - " + latlng.lng());
    });

  };