topic Re: Using the New Component Structure with React in ArcGIS JavaScript Maps SDK Questions

Using the New Component Structure with React

EmrahAydemir — Wed, 09 Apr 2025 23:50:46 GMT

Help! <arcgis-fullscreen> Web Component Not Working in React

Hey Esri Community!

I'm trying to migrate from the deprecated Fullscreen widget to the new <arcgis-fullscreen> web component in my React app (using SDK 4.32+), but hitting a wall. The button shows up but stays disabled - no errors, just doesn't respond to clicks.

What Fails in React:

return (
  <div className="w-full h-full relative" ref={containerRef}>
    <arcgis-map 
      className="w-full h-full" 
      ref={mapDiv}
    >
      <arcgis-fullscreen 
        position="bottom-right"
      ></arcgis-fullscreen>
    </arcgis-map>
  </div>
);

As you can see in the picture, the button is outside the element and is disabled.

Symptoms:

Button appears but looks disabled (grayed out)
No console errors
No view property warnings

How are React devs supposed to connect the view to web components? The docs show vanilla JS examples but React's rendering lifecycle seems to break the expected flow.

Anyone successfully implemented this in React? Is there a secret sauce to wiring up web components with the view instance? Appreciate any tips!

Re: Using the New Component Structure with React

JonathanDawe_BAS — Thu, 10 Apr 2025 08:59:44 GMT

I don't encounter the issues you are seeing, i wonder if there is some kind of lifecycle rendering issue happening? Are you using React 19 and have everything imported?

For a React implementation I have a pretty customised setup! I have an example here if it is useful to you: https://github.com/antarctica/embedded-maps/blob/main/src/components/Map/Map.tsx

You will notice I have replaced arcgis-map with a component which wraps it and add some logic to do with setting up a internal (and external context). https://github.com/antarctica/embedded-maps/blob/main/src/lib/arcgis/components/ArcView/ArcMapView.tsx

Re: Using the New Component Structure with React

ReneRubalcava — Thu, 10 Apr 2025 14:14:35 GMT

Like @JonathanDawe_BAS I'm not seeing this behavior either. I modified our React sample to use fullscreen and no issues.

import "@arcgis/map-components/components/arcgis-map"; import "@arcgis/map-components/components/arcgis-fullscreen"; export default function App() { return ( <arcgis-map itemId="d5dda743788a4b0688fe48f43ae7beb9" onarcgisViewReadyChange={(event) => { console.log("MapView ready", event); }} > <arcgis-fullscreen position="top-right"></arcgis-fullscreen> </arcgis-map> ); }

If you have a github repo, might be able to take a look.

Re: Using the New Component Structure with React

ReneRubalcava — Thu, 10 Apr 2025 14:17:39 GMT

One thing to check, based on your screenshot, it looks like the fullscreen component is outside the arcgis-map component, but not based on your snippet. Make sure you are not using self-closing tags "<arcgis-fullscreen />", this is not valid for Custom Elements and cause issues like this. Also if you're component is outside the arcgis-map component, there is a reference-element attribute you can use to refer to the id or tag name of the arcgis-map component.

Re: Using the New Component Structure with React

EmrahAydemir — Sun, 13 Apr 2025 09:09:19 GMT

Thank you so much for your help, @JonathanDawe_BAS & @ReneRubalcava. I apologize for the late reply due to my other work commitments. After long hours of coding, I sometimes miss simple details. I had used 3dScene and forgot to add

import "@arcgis/map-components/components/arcgis-scene";

Once I included it, everything worked fine, and it’s now running smoothly. Your answers inspired the solution. Thank you very much! I'm familiar with the old component structure of ArcGIS, but Map Components are a different experience for me...

Just a note: In my initial example where I used

<arcgis-map>

, I’d also overlooked adding the

import "@arcgis/map-components/components/arcgis-map";