Unique "key", :first-child unsafe, and no output
See original GitHub issueI 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:
- Created 4 years ago
- Reactions:11
- Comments:5 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
can confirm just started integrating and getting these two errors as well.
Been getting this too when creating a blank react-create-app