How to use ReactJS Functional component for CustomContent in PopUpTemplate in JS API 4.X

Vara_PrasadM_S

Hi,

I have a React Functional Component. I would like to use this to show in PopUp in JS API 4.X ReactJS based application. I am using React V 17.0. The content from functional component is shown as html string but it is not rendered as html content.

My code snippet:

 

 

let customContent = new CustomContent({ outFields: ["*"],creator: () => {
const div = document.createElement('div');
ReactDOM.render(<PopUpContent/>, div);
return div;
}
});
const template = new PopupTemplate({
				     outFields: ["*"],
				     title: " ",
				     content: [customContent]
				  });
layerObj.popupTemplate = template;
					 

 

If anyone has any suggestion, please let me know.

Thank you very much in advance!

With Regards,

Vara Prasad

ReneRubalcava

You can use React Portals for using React components in your Popup.

Here's a blog post on the topic.

It will walk you through the steps for something like this.

import { useEffect } from "react";
import { createPortal } from "react-dom";

const PopupPortal = ({ mountNode, children }) => {
  const el = document.createElement("div");

  useEffect(() => {
    mountNode.appendChild(el);
    return () => mountNode.removeChild(el);
  }, [el, mountNode]);

  return createPortal(children, el);
};

export default PopupPortal;