Fixed react warnings

src/components/CarouselMain/CarouselMain.jsx

@@ -34,8 +34,8 @@ const CarouselMain = () => {
  >
  {carouselData.map((el, i) => {
  return (
- <Link to={`/games/${el?._id}`}>
- <div key={i}>
+ <Link to={`/games/${el?._id}`} key={i}>
+ <div>
  <img src={el?.thumbnail} alt="" className="image" />
  <div className="legend" id="legend">
  {el?.price.discount > 0 ? (
@@ -76,7 +76,7 @@ const CarouselMain = () => {
  <div className={styles.bars}>
  {carouselData.map((el, i) => {
  return (
- <div className={styles.bar}>
+ <div className={styles.bar} key={i}>
  <img src={el?.thumbnail} alt="" />
  <p>{el?.title}</p>
  </div>

src/components/LandingPageComponents/MainCardContainer/MainCardContainer.jsx

@@ -1,7 +1,6 @@
 import { Link } from "react-router-dom";
 
 import TopCategorySlider from "../../TopCategorySlider";
-import MainCard from "../MainCard";
 import styles from "./mainCardContainer.module.css";
 import GameCard from "../../BrowsePageComponents/GameCard";
 
@@ -13,8 +12,8 @@ const MainCardContainer = ({ data, title }) => {
  <div className={styles.container}>
  {data.map((el, i) => {
  return (
- <div className={styles.card}>
- <Link key={i} to={`/games/${el._id}`}>
+ <div key={i} className={styles.card}>
+ <Link to={`/games/${el._id}`}>
  <GameCard
  image={el.cardImage}
  title={el.title}

src/components/LandingPageComponents/MiniCardContainer/MiniCardContainer.jsx

@@ -12,8 +12,8 @@ const MiniCardContainer = ({ data, heading }) => {
 
  {data.map((el, i) => {
  return (
- <Link to={`/games/${el._id}`}>
- <div key={i} className={styles.card}>
+ <Link key={i} to={`/games/${el._id}`}>
+ <div className={styles.card}>
  <MiniCard
  banner={el.cardImage}
  title={el.title}

src/components/PaymentPageComponents/CardDetails/CardDetails.jsx

@@ -1,9 +1,8 @@
-import styles from "./cardDetails.module.css";
-import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
 
+import styles from "./cardDetails.module.css";
+
 const CardDetails = () => {
  return (
  <>

src/pages/SignupOptionsPage/SignupOptionsPage.jsx

@@ -40,7 +40,7 @@ const SignupOptionsPage = () => {
  <p className={styles.text}>SIGN IN WITH XBOX LIVE</p>
  </div>
  <div className={styles.option}>
- <img src="/social-icons/Playstation_Network.svg" />
+ <img src="/social-icons/Playstation_Network.svg" alt="logo-img" />
  <p className={styles.text}>SIGN IN WITH PLAYSTATION NETWORK</p>
  </div>
  <div className={styles.option}>

src/pages/WishlistPage/WishlistPage.jsx

@@ -30,9 +30,9 @@ const WishListPage = () => {
  <NotificationBar />
 
  {wishlist.length ? (
- wishlist.map((el) => {
+ wishlist.map((el, i) => {
  return (
- <Link to={`/games/${el._id}`}>
+ <Link key={i} to={`/games/${el._id}`}>
  <Card
  id={el._id}
  title={el.title}
@@ -53,4 +53,3 @@ const WishListPage = () => {
 };
 
 export default WishListPage;
-