Merge pull request #872 from skbhagat0502/missingKeyProp

Added key prop wherever required
c2siorg · Oct 4, 2023 · 48962c1 · 48962c1
2 parents 57e4310 + 68fe5cf
commit 48962c1
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 172 deletions.
diff --git a/src/components/CardTabs/Events/index.jsx b/src/components/CardTabs/Events/index.jsx
@@ -6,77 +6,82 @@ import React, { useEffect } from "react";
 import { makeStyles } from "@mui/styles";
 import { Grid } from "@mui/material";
 
-const useStyles = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		flexWrap: "wrap",
-		"& > *": {
-			margin: theme.spacing(0.5),
-		},
-		marginBottom: "2rem",
-		width: "100%",
-		flex: 1,
-	},
-	logo: {
-		width: "2rem",
-		height: "2rem",
-		borderRadius: "50%",
-		marginRight: "10px",
-	},
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    "& > *": {
+      margin: theme.spacing(0.5)
+    },
+    marginBottom: "2rem",
+    width: "100%",
+    flex: 1
+  },
+  logo: {
+    width: "2rem",
+    height: "2rem",
+    borderRadius: "50%",
+    marginRight: "10px"
+  },
 
-	card: {
-		display: "flex",
-		width: "100%",
-	},
+  card: {
+    display: "flex",
+    width: "100%"
+  }
 }));
 
-const EventsCard = (props) => {
-	const classes = useStyles();
+const EventsCard = props => {
+  const classes = useStyles();
 
-	return (
-		<div className={classes.root}>
-			<Card
-				className={(classes.card, classes.root)}
-				data-testId="upcomingEventCard">
-				<CardContent
-					style={{
-						width: "100%",
-					}}>
-					<Typography variant="h5" component="div" gutterBottom>
-						{props.title}
-					</Typography>
-					{props.events.map(function (event, index) {
-						return (
-							<Grid
-								container
-								direction="row"
-								spacing={2}
-								data-testId={index == 0 ? "upEventBox" : ""}>
-								<Grid item xs={3}>
-									<img
-										src={event.img[0]}
-										className={classes.logo}
-										data-testId={index == 0 ? "upEventImg" : ""}
-									/>
-								</Grid>
+  return (
+    <div className={classes.root}>
+      <Card
+        className={(classes.card, classes.root)}
+        data-testId="upcomingEventCard"
+      >
+        <CardContent
+          style={{
+            width: "100%"
+          }}
+        >
+          <Typography variant="h5" component="div" gutterBottom>
+            {props.title}
+          </Typography>
+          {props.events.map(function (event, index) {
+            return (
+              <Grid
+                key={index}
+                container
+                direction="row"
+                spacing={2}
+                data-testId={index == 0 ? "upEventBox" : ""}
+              >
+                <Grid item xs={3}>
+                  <img
+                    src={event.img[0]}
+                    className={classes.logo}
+                    data-testId={index == 0 ? "upEventImg" : ""}
+                  />
+                </Grid>
 
-								<Grid item xs={9}>
-									<Box data-testId={index == 0 ? "upEventName" : ""}>
-										<Typography>{event.name}</Typography>
-									</Box>
-									<Box
-										sx={{ fontWeight: 400, fontSize: "0.8rem" }}
-										data-testId={index == 0 ? "upEventDate" : ""}>
-										<Typography>{event.date}</Typography>
-									</Box>
-								</Grid>
-							</Grid>
-						);
-					})}
-				</CardContent>
-			</Card>
-		</div>
-	);
+                <Grid item xs={9}>
+                  <Box data-testId={index == 0 ? "upEventName" : ""}>
+                    <Typography>{event.name}</Typography>
+                  </Box>
+                  <Box
+                    sx={{ fontWeight: 400, fontSize: "0.8rem" }}
+                    data-testId={index == 0 ? "upEventDate" : ""}
+                  >
+                    <Typography>{event.date}</Typography>
+                  </Box>
+                </Grid>
+              </Grid>
+            );
+          })}
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default EventsCard;
diff --git a/src/components/CardTabs/Tags/index.jsx b/src/components/CardTabs/Tags/index.jsx
@@ -5,69 +5,71 @@ import Typography from "@mui/material/Typography";
 import React, { useEffect } from "react";
 import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		justifyContent: "center",
-		flexWrap: "wrap",
-		"& > *": {
-			margin: theme.spacing(0.5),
-		},
-		marginBottom: "2rem",
-		[theme.breakpoints.down("md")]: {
-			marginBottom: theme.spacing(0),
-			margin: "0.25rem",
-		},
-	},
-	tagsContainer: {
-		[theme.breakpoints.down("sm")]: {
-			maxWidth: "90vw",
-			display: "flex",
-			whiteSpace: "nowrap",
-			overflow: "auto",
-			"&::-webkit-scrollbar": {
-				height: "5px",
-			},
-		},
-	},
-	chip: {
-		margin: "0px 10px 10px 0px",
-		borderRadius: "5px",
-		cursor: "pointer",
-	},
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: "flex",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    "& > *": {
+      margin: theme.spacing(0.5)
+    },
+    marginBottom: "2rem",
+    [theme.breakpoints.down("md")]: {
+      marginBottom: theme.spacing(0),
+      margin: "0.25rem"
+    }
+  },
+  tagsContainer: {
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "90vw",
+      display: "flex",
+      whiteSpace: "nowrap",
+      overflow: "auto",
+      "&::-webkit-scrollbar": {
+        height: "5px"
+      }
+    }
+  },
+  chip: {
+    margin: "0px 10px 10px 0px",
+    borderRadius: "5px",
+    cursor: "pointer"
+  }
 }));
 
-const TagCard = (props) => {
-	const classes = useStyles();
+const TagCard = props => {
+  const classes = useStyles();
 
-	return (
-		<div className={classes.root} data-testId="TagsCard">
-			<Card sx={{ minWidth: 275 }}>
-				<CardContent>
-					<Typography
-						variant="h6"
-						component="div"
-						gutterBottom
-						data-testId="TagsCardTitle">
-						Popular Tags
-					</Typography>
-					<div className={classes.tagsContainer}>
-						{props.tags.map(function (tag, index) {
-							return (
-								<Chip
-									size="small"
-									label={tag}
-									id={index}
-									className={classes.chip}
-									data-testId={index === 0 ? "TagsChip" : ""}
-								/>
-							);
-						})}
-					</div>
-				</CardContent>
-			</Card>
-		</div>
-	);
+  return (
+    <div className={classes.root} data-testId="TagsCard">
+      <Card sx={{ minWidth: 275 }}>
+        <CardContent>
+          <Typography
+            variant="h6"
+            component="div"
+            gutterBottom
+            data-testId="TagsCardTitle"
+          >
+            Popular Tags
+          </Typography>
+          <div className={classes.tagsContainer}>
+            {props.tags.map(function (tag, index) {
+              return (
+                <Chip
+                  key={index}
+                  size="small"
+                  label={tag}
+                  id={index}
+                  className={classes.chip}
+                  data-testId={index === 0 ? "TagsChip" : ""}
+                />
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default TagCard;
diff --git a/src/components/CardTabs/Users/index.jsx b/src/components/CardTabs/Users/index.jsx
@@ -5,56 +5,62 @@ import React from "react";
 import { makeStyles } from "@mui/styles";
 import UserElement from "./UserElement";
 
-const useStyles = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		flexWrap: "wrap",
-		"& > *": {
-			margin: theme.spacing(0.5),
-		},
-		flex: 1,
-		marginBottom: "2rem",
-	},
-	userImg: {
-		width: "2rem",
-		height: "2rem",
-		borderRadius: "50%",
-		marginRight: "10px",
-	},
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    "& > *": {
+      margin: theme.spacing(0.5)
+    },
+    flex: 1,
+    marginBottom: "2rem"
+  },
+  userImg: {
+    width: "2rem",
+    height: "2rem",
+    borderRadius: "50%",
+    marginRight: "10px"
+  },
 
-	card: {
-		display: "flex",
-		minWidth: "100%",
-		width: "100%",
-	},
+  card: {
+    display: "flex",
+    minWidth: "100%",
+    width: "100%"
+  },
 
-	cardContent: {
-		width: "100%",
-	},
+  cardContent: {
+    width: "100%"
+  }
 }));
 
-const UserCard = (props) => {
-	const classes = useStyles();
-	return (
-		<div className={classes.root} data-testId="UsersCard">
-			<Card sx={{ minWidth: 275 }} className={(classes.card, classes.root)}>
-				<CardContent className={classes.cardContent}>
-					<Typography
-						variant="h5"
-						component="div"
-						gutterBottom
-						data-testId="UsersCardTitle">
-						{props.title}
-					</Typography>
-					{props.users.map(function (user, index) {
-						return (
-							<UserElement user={user} index={index} useStyles={useStyles} />
-						);
-					})}
-				</CardContent>
-			</Card>
-		</div>
-	);
+const UserCard = props => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root} data-testId="UsersCard">
+      <Card sx={{ minWidth: 275 }} className={(classes.card, classes.root)}>
+        <CardContent className={classes.cardContent}>
+          <Typography
+            variant="h5"
+            component="div"
+            gutterBottom
+            data-testId="UsersCardTitle"
+          >
+            {props.title}
+          </Typography>
+          {props.users.map(function (user, index) {
+            return (
+              <UserElement
+                key={index}
+                user={user}
+                index={index}
+                useStyles={useStyles}
+              />
+            );
+          })}
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default UserCard;
diff --git a/src/components/Topbar/Activity/ActivityList.jsx b/src/components/Topbar/Activity/ActivityList.jsx
@@ -40,6 +40,7 @@ function ActivityList({ value, toggle, acitvitylist, classname }) {
               <Button
                 variant="outlined"
                 color="primary"
+                key={index}
                 className={`
                     ${classes.defaultButton}
                     ${