add key

client/src/components/Home/RoomSingle.js

@@ -14,7 +14,7 @@ const INIT_ROOM = {
 const RoomSingle = () => {
   const [room, setRoom] = useState([INIT_ROOM]);
   const [error, setError] = useState("");
-  const channelId = 'main';
+  const channelId = "main";
   const { roomId } = useParams(room.roomId);
   async function getJoinRoom(Id) {
     try {
@@ -45,36 +45,40 @@ const RoomSingle = () => {
       {room &&
         room.map((el) => (
           <div>
-            {room[0] === INIT_ROOM ? (<div></div>): (
-            <Link
-              to={`/room/${el.roomId}/${channelId}`}
-              className="text-decoration-none text-dark"
-            >
-              <div
-                className="d-flex mx-4 my-2 p-2"
-                style={{ backgroundColor: "#C4C4C4" }}
+            {room[0] === INIT_ROOM ? (
+              <div></div>
+            ) : (
+              <Link
+                to={`/room/${el.roomId}/${channelId}`}
+                className="text-decoration-none text-dark"
+                key={el.roomId}
               >
-                <div style={{ width: "37px", height: "37px" }}>
-                  <img
-                    src={`/roomUploads/${el.profileimg}`}
-                    className="rounded-circle"
-                    style={{ width: "37px", height: "37px" }}
-                  />
-                </div>
                 <div
-                  className="mx-3 mt-2"
-                  style={{
-                    width: "250px",
-                    overflow: "scroll",
-                    whiteSpace: "nowrap",
-                    msOverflowStyle: "none",
-                  }}
+                  className="d-flex mx-4 my-2 p-2"
+                  style={{ backgroundColor: "#C4C4C4" }}
                 >
-                  {el.name}
+                  <div style={{ width: "37px", height: "37px" }}>
+                    <img
+                      src={`/roomUploads/${el.profileimg}`}
+                      className="rounded-circle"
+                      style={{ width: "37px", height: "37px" }}
+                    />
+                  </div>
+                  <div
+                    className="mx-3 mt-2"
+                    style={{
+                      width: "250px",
+                      overflow: "scroll",
+                      whiteSpace: "nowrap",
+                      msOverflowStyle: "none",
+                    }}
+                  >
+                    {el.name}
+                  </div>
+                  <div className="ms-auto mt-2"> {el.member}/100 </div>
                 </div>
-                <div className="ms-auto mt-2"> {el.member}/100 </div>
-              </div>
-            </Link>)}
+              </Link>
+            )}
           </div>
         ))}
     </div>