topic Re: Displaying React based widget from Expand Widget in ArcGIS JavaScript Maps SDK Questions

Displaying React based widget from Expand Widget

NikMartin — Tue, 01 Aug 2023 20:19:21 GMT

Hi,

I am implementing a custom widget in Typescript+React that has its own UI, but when I try to display the widget in an expand widget, I just get [Object Object] when the Expand widget expands to display my widget.

In my widget, I have stripped it down to the bare code from the /jsapi-custom-ui example project:

export default class PatrickPrint extends React.Component<PatrickPrintParams, State> { render() { return (<div>Hello</div>); } }

When it loads, I get this:

When I'm expecting a simple div with 'Hello' to be rendered.

Re: Displaying React based widget from Expand Widget

ReneRubalcava — Wed, 02 Aug 2023 00:22:01 GMT

The Expand widget can't display React vdom directly. You'll probably want to look at portals for React.

https://react.dev/reference/react-dom/createPortal

You can place a dom element in the expand widget that is used as the element a React component is displayed.

Here is a blog post showing how it would work for Popup, similar to how it would work in Expand.

https://odoe.net/blog/popup-react-portals

Re: Displaying React based widget from Expand Widget

AndyGup — Wed, 02 Aug 2023 00:55:36 GMT

Hi @NikMartin this isn't an issue with the ArcGIS JS SDK. It's a problem with the React component coding, it looks like the component (as an HTMLElement) has not been imported into the app correctly. Here is a conceptual example: https://developers.arcgis.com/javascript/latest/custom-ui/#import-the-component-into-your-application. Without a reproducible sample via a github repo or Stackblitz we can't tell for certain. You'll need to provide a link to one if you are still stuck.

Also note, React recommends not using Class components: https://react.dev/reference/react/Component. They recommend migrating to functions, which is the pattern we demonstrate in the jsapi-custom-ui sample.

Re: Displaying React based widget from Expand Widget

NikMartin — Thu, 03 Aug 2023 14:01:00 GMT

Thank you Andy, I was able to get it working with a few more Google searches, by injected a div into the DOM, like:

Not as elegant as I hoped, but seems to be working fine.