Fix react keys

frontend/src/components/meeting/Meeting.css

@@ -1,4 +1,7 @@
 .meeting-quickjoin {
   text-align: center
-
+}
+
+.meeting {
+  flex-grow: 3;
 }

frontend/src/components/meeting/Meeting.tsx

@@ -6,6 +6,7 @@ import JitsiEntrypoint from '../jitsi/JitsiEntrypoint'
 import { UserInfo } from '../jitsi/types'
 import MeetingNameInput from './MeetingNameInput'
 import './Meeting.css'
+import React from 'react'
 
 interface Props {
   conferenceData: ConferenceData | undefined
@@ -34,12 +35,12 @@ function Meeting(props: Props) {
   }
 
   return (
-    <div>
+    <div className="meeting">
       <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
       <div className="meeting-quickjoin">
         {usersData?.roomsData.map((roomData) => {
           return (
-            <>
+            <React.Fragment key={roomData.roomName}>
               <h3>
                 <a
                   href="#"
@@ -54,7 +55,7 @@ function Meeting(props: Props) {
               {roomData.participants.map((participant) => (
                 <div key={participant.jid}> {participant.displayName} </div>
               ))}
-            </>
+            </React.Fragment>
           )
         })}
       </div>

frontend/src/components/sidebar/Sidebar.tsx

@@ -5,6 +5,7 @@ import { UsersData } from '../../background/types/roomData'
 import useMeetingStarted from '../../hooks/useMeetingStarted'
 import { useRoomName } from '../../hooks/useRoomName'
 import Chat from '../chat/Chat'
+import React from 'react'
 
 interface Props {
   usersData: UsersData
@@ -22,7 +23,7 @@ function Sidebar(props: Props) {
       <div className="sidebar-body">
         {props.usersData.roomsData.map((roomData) => {
           return (
-            <>
+            <React.Fragment key={roomData.roomName}>
               <h3>
                 <a
                   href="#"
@@ -37,12 +38,12 @@ function Sidebar(props: Props) {
               {roomData.participants.map((participant) => (
                 <div key={participant.jid}> {participant.displayName} </div>
               ))}
-            </>
+            </React.Fragment>
           )
         })}
       </div>
       <div>
-        <h3> No room</h3>
+        <h3>No room</h3>
         {props.usersData.usersWithOutRoom.map((user) => (
           <div key={user.uuid}>{user.name}</div>
         ))}