gsoft-inc / sg-orbit

The design system for ShareGate web apps.
https://orbit.sharegate.design
Apache License 2.0
101 stars 37 forks source link

🐛 Menu causes react error: Warning: A props object containing a "key" prop is being spread into JSX: #1237

Open Suhaibinator opened 1 month ago

Suhaibinator commented 1 month ago

The following error is thrown when a basic menu is used (the exact menu copied and pasted from the example in fact)

Describe the bug

index.tsx:86 Warning: A props object containing a "key" prop is being spread into JSX: let props = {key: someKey, id: ..., item: ..., ref: ..., children: ...}; <ForwardRef {...props} /> React keys must be passed directly to JSX without using spread: let props = {id: ..., item: ..., ref: ..., children: ...}; <ForwardRef key={someKey} {...props} /> at InnerMenu (http://localhost:3000/static/js/bundle.js:20879:21) at div at http://localhost:3000/static/js/bundle.js:13419:81 at InnerBox (http://localhost:3000/static/js/bundle.js:7610:122) at BreakpointProvider (http://localhost:3000/static/js/bundle.js:27647:3) at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:28549:7) at div at http://localhost:3000/static/js/bundle.js:13419:81 at InnerBox (http://localhost:3000/static/js/bundle.js:7610:122) at InnerTransition (http://localhost:3000/static/js/bundle.js:32531:7) at InnerOverlay (http://localhost:3000/static/js/bundle.js:22401:7) at InnerMenuTrigger (http://localhost:3000/static/js/bundle.js:21366:102) at div at http://localhost:3000/static/js/bundle.js:13419:81 at InnerBox (http://localhost:3000/static/js/bundle.js:7610:122) at InnerFlex (http://localhost:3000/static/js/bundle.js:19134:93)

Steps to reproduce

Simply trying to render the following causes the error `

Launch... Eject... Land... Help Exit
</Flex>`

Expected results

No console warning

Reproducible demo

Simply using this will cause the error:

`

Launch... Eject... Land... Help Exit
</Flex>`