Using the New Component Structure with React

EmrahAydemir

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!

 

EmrahAydemir

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";