From c77e006ce441744470a022251d789b9ffa521209 Mon Sep 17 00:00:00 2001
From: qvalentin <valentin.theodor@web.de>
Date: Tue, 1 Aug 2023 09:38:44 +0200
Subject: [PATCH] Fix react keys

---
 frontend/src/components/meeting/Meeting.css | 5 ++++-
 frontend/src/components/meeting/Meeting.tsx | 7 ++++---
 frontend/src/components/sidebar/Sidebar.tsx | 7 ++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/meeting/Meeting.css b/frontend/src/components/meeting/Meeting.css
index 9cbe859..a63af6c 100644
--- a/frontend/src/components/meeting/Meeting.css
+++ b/frontend/src/components/meeting/Meeting.css
@@ -1,4 +1,7 @@
 .meeting-quickjoin {
   text-align: center
-
+}
+
+.meeting {
+  flex-grow: 3;
 }
diff --git a/frontend/src/components/meeting/Meeting.tsx b/frontend/src/components/meeting/Meeting.tsx
index d489575..eb0e3b3 100644
--- a/frontend/src/components/meeting/Meeting.tsx
+++ b/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>
diff --git a/frontend/src/components/sidebar/Sidebar.tsx b/frontend/src/components/sidebar/Sidebar.tsx
index 3e69178..b5440b5 100644
--- a/frontend/src/components/sidebar/Sidebar.tsx
+++ b/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>
         ))}