Custom Component Not Working

[umutyorulmaz]

Hey, I wrote this code in the custom component:

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.18.6/babel.min.js"></script> 
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script type="text/babel">
  const App = () => {
    return React.createElement(
      'div',
      { style: { border: '1px solid blue', padding: '20px' } },
      React.createElement('h1', null, 'Hello, Openblocks!'),
      React.createElement('p', null, 'This is your custom component.')
    );
  };

  ReactDOM.render(React.createElement(App), document.getElementById('root'));
</script>

and under data:

{
  "query": "MockQuery"
}

however I just see blank white screen. I can observe at the network tab libraries loaded and no request errors. Also I added al the libraries I need from JavaScript Library section. What I do wrong?

errors and warning from console:

The value "noviewport-fit" for key "user-scalable" is invalid, and has been ignored.
index.html:1 The key "cover" is not recognized and ignored.
2Uncaught ResizeObserver loop completed with undelivered notifications.

[FalkWolsky]

We may not understand why you try to load react - cause the custom component has this already pre-loaded for you.
Likely this is the reason why the display does not work?

Also please follow the advised way of the render method: ReactDOM.createRoot()

<div id="root"></div>

<script type="text/babel">

  const MyCustomComponent = ({ runQuery, model, updateModel }) => (
    <your code here>
  );

  const ConnectedComponent = Lowcoder.connect(MyCustomComponent);
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<ConnectedComponent />);
  
</script>