Fix key warning

aleannab · Jul 8, 2024 · 5804865 · 5804865
1 parent e6cd2d1
commit 5804865
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/pages/portfolio/index.js b/src/pages/portfolio/index.js
@@ -11,17 +11,19 @@ export const Portfolio = () => {
       <Container className="About-header">
         <Helmet>
           <meta charSet="utf-8" />
-          <title> Portfolio | {meta.title} </title> <meta name="description" content={meta.description} />
+          <title> Portfolio | {meta.title} </title>
+          <meta name="description" content={meta.description} />
         </Helmet>
         <Row className="mb-5 mt-3 pt-md-3">
           <Col lg="8">
-            <h1 className="display-4 mb-4"> Portfolio </h1> <hr className="t_border my-4 ml-0 text-left" />
+            <h1 className="display-4 mb-4"> Portfolio </h1>
+            <hr className="t_border my-4 ml-0 text-left" />
           </Col>
         </Row>
         <div className="mb-5 po_items_ho">
           {dataportfolio.map((data) =>
             data.externalLink ? (
-              <a href={`${data.externalLink}`} target="_blank">
+              <a key={`external-${data.id}`} href={`${data.externalLink}`} target="_blank" rel="noopener noreferrer">
                 <div className="po_item">
                   <img src={data.hero} alt="" />
                   <div className="content">

diff --git a/src/pages/project/index.js b/src/pages/project/index.js
@@ -6,7 +6,7 @@ import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { Container, Row, Col } from 'react-bootstrap';
 import { meta, dataportfolio } from '../../content_option';
 
-export const Project = ({}) => {
+export const Project = () => {
   // Get the projectId from the URL
   const { projectId } = useParams();
 
@@ -52,12 +52,12 @@ export const Project = ({}) => {
         </Row>
         <Row className="sec_sp">
           <div className="details d-flex flex-column w-100 flex-md-row justify-content-between gap-5">
-            {projectData.details.map((detail) => (
-              <div className="text d-flex flex-column">
+            {projectData.details.map((detail, index) => (
+              <div key={index} className="text d-flex flex-column">
                 <h3>{detail.label}</h3>
                 <ul className="list-unstyled">
-                  {detail.content.map((item, index) => (
-                    <li key={index}>
+                  {detail.content.map((item, idx) => (
+                    <li key={idx}>
                       {detail.link ? (
                         <a href={detail.link} target="_blank" rel="noopener noreferrer" className="text-decoration-none font-weight-bold">
                           {item}