-
Notifications
You must be signed in to change notification settings - Fork 268
Custom Component Not Working #1450
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
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>
Beta Was this translation helpful? Give feedback.