Dynamic layer update inside <Layer source-layer={layer} /> does not work

[Artem]

I can’t change the source-layer dynamically in <Layer source-layer={this.state.layer} />. By pressing a button I change state to layer: 'building' or layer: 'road' but changes do not occur inside <Layer source-layer={this.state.layer} />

Code with example: https://codesandbox.io/s/compassionate-brook-l1psj

class App extends React.Component {
  state = {
    mapStyle: "mapbox://styles/mapbox/light-v9",
    viewport: {
      latitude: 44.8016,
      longitude: -68.7712,
      zoom: 15
    },
    layer: "building"
  };

  render() {
    const { mapStyle } = this.state;
    return (
      <div className="App">
        <div>
          <button
            onClick={() => {
              if (this.state.layer === "road") {
                this.setState(state => {
                  return {
                    ...state,
                    layer: "building"
                  };
                });
              } else {
                this.setState(state => {
                  return {
                    ...state,
                    layer: "road"
                  };
                });
              }
            }}
          >
            Change Style
          </button>
        </div>
        <MapGL
          style={{ width: "100%", height: "400px" }}
          mapStyle={mapStyle}
          accessToken={MAPBOX_ACCESS_TOKEN}
          onViewportChange={viewport =>
            this.setState(state => {
              return {
                ...state,
                viewport
              };
            })
          }
          {...this.state.viewport}
        >
          <Source
            id="maine"
            type="vector"
            url="mapbox://mapbox.mapbox-streets-v8"
          />
          {console.log(this.state.layer)} // Here I see that the state is changing
          <Layer
            id="maine"
            type="fill"
            source="maine"
            source-layer={this.state.layer}
            paint={{
              "fill-color": "#088",
              "fill-opacity": 0.8
            }}
          />
        </MapGL>
      </div>
    );
  }
}

[Stepan Kuzmin]

Hi @itwaze

Thanks for filling the issue, should be fixed in v1.12.4

[Artem]

Hi @itwaze

Thanks for filling the issue, should be fixed in v1.12.4

Thanks, @stepankuzmin for such a quick solution, your fix works, but you also need to add a dynamic identifier for the layer, because then errors appear in the console and I can’t go back to the previous layer.

In your tests, the layer identifier is the same, but in Mapbox examples they are always different:
https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/

Check it please: https://codesandbox.io/s/compassionate-brook-l1psj

[Stepan Kuzmin]

Hi @itwaze

You don't have to change Source or Layer id, because it will unmount the components. All you need is just change Layer source-layer prop.

See https://codesandbox.io/s/adoring-mendel-qjnom