How to pass custom html code from js query to custom Component in iframe section

App Building
1

I have two queries running. The first query accepts HTML code in the form of raw XML from the server to the Retool platform. This raw XML contains raw HTML code. Then, I pass this raw HTML code to a custom component and send the code to an iframe. However, the issue is that the HTML code is not rendering in the custom component.

retool
retool1918×1003 193 KB

what i want to do is i want to process this raw html code in the custom component but it is not rendering this html code

2

Hi @Naresh_Choudhary

You want React to render a component out of a string source.

Aside the security implications, you have to explicitly do this, such as:

const comp = () => {
   const html = { __html: '<p>raw html</p>' };
   return <div dangerouslySetInnerHTML={html} />;
}

There are also libraries that do the same.
React doesn't do that implicitly for security reasons.

Hope this help

1 Like
3

this works for me , thank you soo much @abusedmedia love you bro

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="react"></div>
<script type="text/babel">
  const MyCustomComponent = ({ model }) => {

    const rawHtml = model.rawXml;

      const htmlContent = { __html: rawHtml };
    return <div dangerouslySetInnerHTML={htmlContent}></div>;

  };
  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  const container = document.getElementById("react");
  const root = ReactDOM.createRoot(container);
  root.render(<ConnectedComponent />);
</script>
1 Like