React-mapbox-gl: style prop must be an object

[ksathyareddy7]

I was using the boilerplate available for debugging purpose provided in this package. when I did

npm start 
compiled with warnings.
Line 20: Style prop must be an object   react/style-prop-object

The map loads fine but why is this warning is shown?

[redbmk]

This is because style is usually a way of decorating elements in JSX, so eslint is warning you that it should be an object. In the case of react-mapbox-gl you would use containerStyle instead, and style is for the mapbox styles, so it's a little confusing.

[redbmk]

BTW one thing you can do to get rid of the warning is something like this:

// eslint-disable-next-line
<MapboxGL style="mapbox://styles/mapbox/streets-v10"
  center={this.state.center}
  zoom={this.state.zoom}
/>

Another option would be to download the style, then import it as json, which means it's now an object (hence removing the warning) and will now be bundled in your code, so one less network request.

import mapboxStyle from './streets-style.json';
// ...
<MapboxGL
  style={mapboxStyle}
  center={this.state.center}
  zoom={this.state.zoom}
/>

[redbmk]

@alex3165 What if this were a change in v4? Since airbnb's eslint config is pretty popular and is on that tells you not to use strings for the style prop, what if we changed it so that style were the container style, and mapStyle were the style for the map?

That might be a bit confusing for anyone upgrading to v4 though, so maybe even just disable the style prop altogether and warn users that it's now called mapStyle.

[alex3165]

Ok, I would go for:

• mapStyle: for mapbox style
• style: for container style.

In v4 branch and explain this correctly in a breaking changes section for the v4 release.

PR against v4 branch welcome 👍

[arunstan]

If no one has got a PR for this yet, I can make one.

[redbmk]

@arunstan there was some confusion at one point - since this was a breaking change it went into a v4 branch, but those changes got lost when v4 was actually released. This would still be a breaking change so I think it would need to go into v5, but not sure the best way to coordinate that this time.

I would imagine there would be some conflicts with pulling in the same code, but if you wanted to make a new PR you could use https://github.com/alex3165/react-mapbox-gl/pull/533 as a reference.

[arunstan]

Thanks for your reply @redbmk I would try to come up with for PR for v5 based on #533