Merge pull request #412 from bevali/master

Convert string refs to create refs

Author: auser

dist/index.js

@@ -356,6 +356,9 @@
             });
           });
         }
+      }, {
+        key: 'ref',
+        value: {}
       }, {
         key: 'render',
         value: function render() {
@@ -370,7 +373,7 @@
             { style: containerStyles, className: this.props.className },
             _react2.default.createElement(
               'div',
-              { style: style, ref: 'map' },
+              { style: style, ref: (element) => (this.ref.map = element) },
               'Loading map...'
             ),
             this.renderChildren()

src/GoogleApiComponent.js

@@ -51,6 +51,8 @@ export const wrapper = input => WrappedComponent => {
         google: null,
         options: options
       };
+
+      this.mapRef=React.createRef();
     }
 
     componentWillReceiveProps(props) {
@@ -120,7 +122,7 @@ export const wrapper = input => WrappedComponent => {
       return (
         <div>
           <WrappedComponent {...props} />
-          <div ref="map" />
+          <div ref={this.mapRef} />
         </div>
       );
     }

src/index.js

@@ -65,6 +65,8 @@ export class Map extends React.Component {
         lng: this.props.initialCenter.lng
       }
     };
+
+    this.mapRef=React.createRef();
   }
 
   componentDidMount() {
@@ -130,7 +132,7 @@ export class Map extends React.Component {
       const {google} = this.props;
       const maps = google.maps;
 
-      const mapRef = this.refs.map;
+      const mapRef = this.mapRef.current;
       const node = ReactDOM.findDOMNode(mapRef);
       const curr = this.state.currentLocation;
       const center = new maps.LatLng(curr.lat, curr.lng);
@@ -257,7 +259,7 @@ export class Map extends React.Component {
 
     return (
       <div style={containerStyles} className={this.props.className}>
-        <div style={style} ref="map">
+        <div style={style} ref={this.mapRef}>
           Loading map...
         </div>
         {this.renderChildren()}