Warning: bind(): React component methods may only be bound to the component instance about react-mapbox-gl HOT 7 CLOSED

Can you try to modify your MyMap.js to :

            <ZoomControl
              zoomDiff={1}
              onControlClick={this._onControlClick.bind(this)}
            />

from react-mapbox-gl.

That doesn't help. It just adds a new warning:

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See AlvarMap

The warning comes because ZoomControl component is messing with MyMap component's method.

zoom-control.js, row 103:

onClick={onControlClick.bind(this, map, zoomDiff)}> 

There the onControlClick method is MyMap's method: MyMap._onControlClick. React warns because you shouldn't be rebinding the this to a new component.

from react-mapbox-gl.

I have published a patch (0.19.1) where I have replaced the bind with an arrow function, let me know if it fix your issue.

from react-mapbox-gl.

I tested with version 0.19.1 but the problem still persists.

from react-mapbox-gl.

Can you send me a link to your project ? or a link to a jsfiddle ?

from react-mapbox-gl.

The affected line was changed in a previous patch and we don't have an example available, to reproduce the issue, thus I need to close this for now 😄

from react-mapbox-gl.

Sorry for taking so long. I don't know how I tested it before but I can now confirm that bump from 0.18.0 -> 0.19.1 fixed this issue.

A reproducible example of the bug: https://github.com/kimmobrunfeldt/react-mapbox-gl-bug/blob/master/src/MyMap.js

git clone [email protected]:kimmobrunfeldt/react-mapbox-gl-bug.git 
cd react-mapbox-gl-bug
npm install
npm start

from react-mapbox-gl.