How to use react render with AngularJs and ngReact

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.