fix: crashed when clicked on mic + webcam menu

mynaparrot · Oct 23, 2024 · 5f70cfd · 5f70cfd
1 parent 777c073
commit 5f70cfd
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/src/components/footer/icons/mic-menu/index.tsx b/src/components/footer/icons/mic-menu/index.tsx
@@ -22,6 +22,7 @@ const MicMenu = ({ currentRoom }: IMicMenuProps) => {
               </MenuButton>
 
               <Transition
+                as={'div'}
                 show={open}
                 enter="transition duration-100 ease-out"
                 enterFrom="transform scale-95 opacity-0"

diff --git a/src/components/footer/icons/mic-menu/items.tsx b/src/components/footer/icons/mic-menu/items.tsx
@@ -32,9 +32,9 @@ const MicMenuItems = ({ currentRoom }: IMicMenuItemsProps) => {
   const [newDevice, setNewDevice] = useState<string>();
 
   useEffect(() => {
-    const devicesMenu = audioDevices.map((device) => {
+    const devicesMenu = audioDevices.map((device, i) => {
       return (
-        <div className="" role="none" key={device.id}>
+        <div className="" role="none" key={`${device.id}-${i}`}>
           <MenuItem>
             {() => (
               <p

diff --git a/src/components/footer/icons/webcam-menu/index.tsx b/src/components/footer/icons/webcam-menu/index.tsx
@@ -22,6 +22,7 @@ const WebcamMenu = ({ currentRoom }: IWebcamMenuProps) => {
 
               {/* Use the Transition component. */}
               <Transition
+                as={'div'}
                 show={open}
                 enter="transition duration-100 ease-out"
                 enterFrom="transform scale-95 opacity-0"

diff --git a/src/components/footer/icons/webcam-menu/items.tsx b/src/components/footer/icons/webcam-menu/items.tsx
@@ -29,9 +29,9 @@ const WebcamMenuItems = ({ currentRoom }: IWebcamMenuItemsProps) => {
   const [newDevice, setNewDevice] = useState<string>();
 
   useEffect(() => {
-    const devicesMenu = videoDevices.map((device) => {
+    const devicesMenu = videoDevices.map((device, i) => {
       return (
-        <div className="" role="none" key={device.id}>
+        <div className="" role="none" key={`${device.id}-${i}`}>
           <MenuItem>
             {() => (
               <p