visgl / visgl/react-map-gl

[Bug] Prop `style` does not unset properties that become `undefined`

Open
#2,595 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.5k
Forks
1.4k
Avg merge
5d 17h
Merged PRs (30d)
3

Description

Description

In the following snippet:

<MapGLMarker
        latitude={location.coordinates.latitude}
        longitude={location.coordinates.longitude}
        anchor="bottom"
        style={{
          ...(condition
            ? { background: 'red', }
            : { background: undefined, }), // Note: similar problem if just passing {}
        }}
      >
Expected Behavior

When condition goes from true to false, the background attribute is un-set on the element.

Steps to Reproduce

Reproduction: https://codesandbox.io/p/sandbox/long-rgb-6f4mdv

Code snippet
import * as React from "react";
import { createRoot } from "react-dom/client";
import Map, { Marker } from "react-map-gl";

import "mapbox-gl/dist/mapbox-gl.css";

function Root() {
  const [state, setState] = React.useState(false);
  return (
    <>
      <button onClick={() => setState(!state)}>
        background: {state ? "on" : "off"}
      </button>
      <Map
        initialViewState={{
          latitude: 37.8,
          longitude: -122.4,
          zoom: 14,
        }}
        style={{ width: "100vw", height: "100vh" }}
        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      >
        <Marker
          longitude={-122.4}
          latitude={37.8}
          style={{
            ...(state ? { background: "red" } : { background: undefined }), // Note: similar problem if just passing {}
          }}
        />
      </Map>
    </>
  );
}

/* global document */
createRoot(document.getElementById("app")).render(<Root />);
Environment
  • Framework version: react-map-gl@8.1.1 (in my project; reproduction template used ^7.1.0)
  • Map library: mapbox-gl@3.24.0
  • Browser: (not relevant)
  • OS: (not relevant)
Logs

No logging produced

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Marker component entry point and trace how its style prop is applied during updates. Run the linked CodeSandbox reproduction, then inspect the style-update path for transitions from a defined background to undefined or an empty object. Done means the background attribute is removed when the condition changes to false.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
66/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.