chore: Using id in Skills and Hobbies

- Build skills, hobbies as an array of object with id as a unique key

src/templates/castform/Castform.js

@@ -79,8 +79,8 @@ const Castform = () => {
   );
 
   const SkillItem = x => (
-    <li key={x} className="text-sm my-2">
-      {x}
+    <li key={x.id} className="text-sm my-2">
+      {x.skill}
     </li>
   );
 
@@ -94,8 +94,8 @@ const Castform = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-sm my-2">
-      {x}
+    <li key={x.id} className="text-sm my-2">
+      {x.hobby}
     </li>
   );
 

src/templates/celebi/Celebi.js

@@ -144,8 +144,8 @@ const Celebi = () => {
         <Heading title="Skills" className="w-3/4 mx-auto" />
         <ul className="list-none text-sm">
           {data.skills.items.map(x => (
-            <li key={x} className="my-2">
-              {x}
+            <li key={x.id} className="my-2">
+              {x.skill}
             </li>
           ))}
         </ul>
@@ -158,8 +158,8 @@ const Celebi = () => {
         <Heading title="Hobbies" className="w-3/4 mx-auto" />
         <ul className="list-none text-sm">
           {data.hobbies.items.map(x => (
-            <li key={x} className="my-2">
-              {x}
+            <li key={x.id} className="my-2">
+              {x.hobby}
             </li>
           ))}
         </ul>

src/templates/gengar/Gengar.js

@@ -65,8 +65,8 @@ const Gengar = () => {
     );
 
   const SkillItem = x => (
-    <li key={x} className="text-sm py-1">
-      {x}
+    <li key={x.id} className="text-sm py-1">
+      {x.skill}
     </li>
   );
 
@@ -80,8 +80,8 @@ const Gengar = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-sm py-1">
-      {x}
+    <li key={x.id} className="text-sm py-1">
+      {x.hobby}
     </li>
   );
 

src/templates/glalie/Glalie.js

@@ -173,8 +173,8 @@ const Glalie = () => {
     );
 
   const SkillItem = x => (
-    <li key={x} className="text-xs font-medium">
-      {x}
+    <li key={x.id} className="text-xs font-medium">
+      {x.skill}
     </li>
   );
 
@@ -188,8 +188,8 @@ const Glalie = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-xs font-medium">
-      {x}
+    <li key={x.id} className="text-xs font-medium">
+      {x.hobby}
     </li>
   );
 

src/templates/onyx/Onyx.js

@@ -147,14 +147,14 @@ const Onyx = () => {
 
   const HobbyItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
       style={{
         backgroundColor: theme.colors.primary,
         color: theme.colors.background,
       }}
     >
-      {x}
+      {x.hobby}
     </span>
   );
 
@@ -169,14 +169,14 @@ const Onyx = () => {
 
   const SkillItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
       style={{
         backgroundColor: theme.colors.primary,
         color: theme.colors.background,
       }}
     >
-      {x}
+      {x.skill}
     </span>
   );
 

src/templates/pikachu/Pikachu.js

@@ -60,10 +60,10 @@ const Pikachu = () => {
 
   const SkillItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
     >
-      {x}
+      {x.skill}
     </span>
   );
 
@@ -78,10 +78,10 @@ const Pikachu = () => {
 
   const HobbyItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
     >
-      {x}
+      {x.hobby}
     </span>
   );