React-diagrams: Unique "key", :first-child unsafe, and no output

Created on 19 Aug 2019 · 5Comments · Source: projectstorm/react-diagrams

I am trying to run the example code from the docs, but nothing shows. I get the following errors in the console:

root ERROR Warning: Each child in a list should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.%s

Check the render method of Component.
in Component (created by Component)
in Component (created by MyView)
in MyView

and

root ERROR The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

here is my code:

export namespace MyView {
    export interface Props {
    }

    export interface State {
    }
}

export class MyView extends React.Component<MyView.Props, MyView.State> {

    protected readonly engine: DiagramEngine;
    protected readonly model: DiagramModel;

    constructor(props: MyView.Props) {
        super(props);

        this.engine = createEngine();

        const node1 = new DefaultNodeModel({
            name: 'Node 1',
            color: 'rgb(0,192,255)'
        });

        node1.setPosition(100,100);
        let port1 = node1.addOutPort('Out');

        // node 2
        const node2 = new DefaultNodeModel({
            name: 'Node 2',
            color: 'rgb(0,150,255)',
        });
        node2.setPosition(50, 100);
        let port2 = node2.addOutPort('Out');

        const link = port1.link<DefaultLinkModel>(port2);
        link.addLabel('Hello World');

        this.model = new DiagramModel();
        this.model.addAll(node1, node2, link);

        this.engine.setModel(this.model);

    }


    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {

        return <CanvasWidget engine={this.engine} />

    }

}

Any ideas?

Source