(FIX) TypeError: Cannot read properties of undefined (reading 'g')

Author: nmreyes

src/sections/projectSection/components/Indicator.js

@@ -156,12 +156,13 @@ function Indicator({ projects, costs }) {
     return new Date(b.last_updated) - new Date(a.last_updated);
   });
 
-  const set0 = newProjects.filter((project) => project.gsp.length === 0); 
-  const set1 = newProjects.filter((project) => project.gsp[0]?.g === 1); 
-  const set2 = newProjects.filter((project) => project.gsp[0]?.g === 2); 
-  const set3 = newProjects.filter((project) => project.gsp[0]?.g === 3); 
-  const set4 = newProjects.filter((project) => project.gsp[0]?.g === 4); 
-  const set5 = newProjects.filter((project) => project.gsp[0]?.g === 5); 
+  const set0 = newProjects.filter((project) => project.gsp.length === 0);
+  const set1 = newProjects.filter((project) => project.gsp[0] && project.gsp[0].g === 1);
+  const set2 = newProjects.filter((project) => project.gsp[0] && project.gsp[0].g === 2);
+  const set3 = newProjects.filter((project) => project.gsp[0] && project.gsp[0].g === 3);
+  const set4 = newProjects.filter((project) => project.gsp[0] && project.gsp[0].g === 4);
+  const set5 = newProjects.filter((project) => project.gsp[0] && project.gsp[0].g === 5);
+  
 
 
   const dropped = set1.filter((project) => project.status == 0);

src/sections/projectSection/components/Readiness.js

@@ -322,13 +322,10 @@ function Readiness({ projects, costs }) {
                                 >
                                   <Avatar src={institute.logo} /> {institute.title}
                                 </TableCell>
-                                <TableCell
-                                  className={classes.tableFont}
-                                  align="center"
-                                >
-                                  {project.gsp[0].g}.{project.gsp[0].s}.
-                                  {project.gsp[0].p}
+                                <TableCell className={classes.tableFont} align="center">
+                                  {project.gsp[0] ? `${project.gsp[0].g}.${project.gsp[0].s}.${project.gsp[0].p}` : ''}
                                 </TableCell>
+
                                 <TableCell
                                   className={classes.tableFont}
                                   align="right"
@@ -638,13 +635,10 @@ function Readiness({ projects, costs }) {
                                 >
                                   <Avatar src={institute.logo} /> {institute.title}
                                 </TableCell>
-                                <TableCell
-                                  className={classes.tableFont}
-                                  align="center"
-                                >
-                                  {project.gsp[0].g}.{project.gsp[0].s}.
-                                  {project.gsp[0].p}
+                                <TableCell className={classes.tableFont} align="center">
+                                  {project.gsp[0] ? `${project.gsp[0].g}.${project.gsp[0].s}.${project.gsp[0].p}` : ''}
                                 </TableCell>
+
                                 <TableCell
                                   className={classes.tableFont}
                                   align="right"