How to use react render with AngularJs and ngReact - angularjs

Question

I am trying to use StormReact library in angularJs app.
In below code i have created class inside the library which is bundled using webpack as single bundle.js
window.HelloStormReact = React.createClass({
render: function() {
var Engine = require("../src/Engine")();
var model = {links:[],nodes: []};
function generateSet(model,offsetX,offsetY){
var node1 = Engine.UID();
var node2 = Engine.UID();
var node3 = Engine.UID();
var node4 = Engine.UID();
var node5 = Engine.UID();
model.links = model.links.concat([
{
id: Engine.UID(),
source: node1,
sourcePort: 'out',
target: node2,
targetPort: 'in',
},
{
id: Engine.UID(),
source: node1,
sourcePort: 'out',
target: node3,
targetPort: 'in'
},
{
id: Engine.UID(),
source: node2,
sourcePort: 'out',
target: node4,
targetPort: 'in'
},
{
id: Engine.UID(),
source: node4,
sourcePort: 'out',
target: node5,
targetPort: 'in2'
},
{
id: Engine.UID(),
source: node2,
sourcePort: 'out',
target: node5,
targetPort: 'in'
}
]);
model.nodes = model.nodes.concat([
{
id:node1,
type: 'action',
data: {
name: "Create User",
outVariables: ['out']
},
x:50 + offsetX,
y:50 + offsetY
},
{
id:node2,
type: 'action',
data: {
name: "Add Card to User",
inVariables: ['in','in 2'],
outVariables: ['out']
},
x:250 +offsetX,
y:50 + offsetY
},
{
id:node3,
type: 'action',
data: {
color: 'rgb(0,192,255)',
name: "Remove User",
inVariables: ['in']
},
x:250 + offsetX,
y:150 + offsetY
},
{
id:node4,
type: 'action',
data: {
color: 'rgb(0,192,255)',
name: "Remove User",
inVariables: ['in'],
outVariables: ['out']
},
x:500 + offsetX,
y:150 + offsetY
},
{
id:node5,
type: 'action',
data: {
color: 'rgb(192,255,0)',
name: "Complex Action 2",
inVariables: ['in','in2','in3']
},
x:800 + offsetX,
y:100 + offsetY
},
]);
}
generateSet(model,0,0);
Engine.registerNodeFactory({
type:'action',
generateModel: function(model){
return React.createElement(BasicNodeWidget,{
removeAction: function(){
Engine.removeNode(model);
},
color: model.data.color,
node: model,
name: model.data.name,
inPorts: model.data.inVariables,
outPorts: model.data.outVariables
});
}
});
Engine.loadModel(model);
return ReactDOM.render(React.createElement(Canvas,{engine: Engine}), document.getElementById("howdy"));;
}
});
In index.html, I used that class created in Storm react library module.
<div class="content">
<react-component name="HelloStormReact" />
<div class="storm-flow-canvas" id="howdy">
</div>
</div>
I am getting the error
Constructor.render(): A valid React element (or null) must be returned.
You may have returned undefined, an array or some other invalid object.
Help me to write correct render object to return.

Answer 1

Since HelloStormReact is just a component, in its render function, you don't need to render it again, just return React.createElement(Canvas,{engine: Engine}) in the render function.