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.
function App() {
const [viewState, setViewState] = useState(null);
const mapDiv = useRef(null);
const webMap = useRef(null);
const mapView = useRef(null);
const printWidget = useRef(null);
const printExpand = useRef(null);
const config = useRef({
printServiceVersion: 10.6,
filename: "Print",
widgetMode: true,
});
useEffect(() => {
if (mapDiv.current) {
esriConfig.portalUrl = portalURL;
webMap.current = new WebMap({
portalItem: {
id: "7a7350f559734d9197dca846de069342",
},
});
mapView.current = new MapView({
container: mapDiv.current,
map: webMap.current
});
printWidget.current = new PatrickPrint({ map: webMap.current, view: mapView.current, config: config.current });
printExpand.current = new Expand({
expandIconClass: "esri-widget--button esri-widget print-icon",
expandTooltip: "Print",
view: mapView.current,
content: printWidget.current,
expanded: false
});
mapView.current.ui.add(printExpand.current, "top-right");
webMap.current.when(() => {
setViewState({ view: mapView.current })
})
}
}, [mapDiv]);
return (
<div className="App" ref={mapDiv}></div>
);
}
export default App;
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.