question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:11
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
mx2323commented, Aug 27, 2019

can confirm just started integrating and getting these two errors as well. image

1reaction
David-Melocommented, Aug 19, 2019

Been getting this too when creating a blank react-create-app

Read more comments on GitHub >

github_iconTop Results From Across the Web

React testing library - check the existence of empty div
I'm testing a component where if ItemLength = 1 , render returns null . const { container, debug } = render(<MyComp ItemLength={1} /> ......
Read more >
Warning: Each Child in a List Should Have a Unique 'key' Prop
If the key is an index, reordering an item in the array changes it. Then React will get confused and re-render the incorrect...
Read more >
pedigree act key.pdf
If the individual is "affected" by the trait (dominant or recessive) we darken the shape. =presence of white forelock trait. -no forelock trait....
Read more >
Common mistakes with React Testing Library - Kent C. Dodds
The reason this is so important is because the get* and find* variants will throw an extremely helpful error if no element is...
Read more >
Node.firstChild - Web APIs - MDN Web Docs
The read-only firstChild property of the Node interface returns the node's first child in the tree, or null if the node has no...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found