Modificacion Incompleta

package.json

@@ -67,7 +67,7 @@
   "devDependencies": {
     "@capacitor/cli": "4.5.0",
     "@ionic/lab": "3.2.15",
-    "react-scripts": "5.0.1"
+    "react-scripts": "^5.0.1"
   },
   "description": "An Ionic project"
 }

src/data/About.json

@@ -0,0 +1,8 @@
+[
+    {
+        "title": "Enciclopedia PR",
+        "title2": "Más sobre nosotros:",
+        "content": "Para más información sobre EnciclopediaPR, visite la página ",
+        "url": "https://enciclopediapr.org/"
+    }
+]

src/pages/AboutUs.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import './AboutUs.css';
 import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
+import About from '../data/About.json'
 
 const AboutUs: React.FC = () => {
   return (
@@ -37,9 +38,17 @@ const AboutUs: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen className="ion-padding">
-        <h1>Enciclopedia PR</h1>
-        <h2>Más sobre nosotros:</h2>
-        <p>Para más información sobre EnciclopediaPR, visite la página href='https://enciclopediapr.org/'</p>
+        {
+          About && About.map(infoAb => {
+            return (
+              <>
+                <h1>{infoAb.title}</h1>
+                <h2>{infoAb.title2}</h2>
+                <p>{infoAb.content} {infoAb.url}</p>
+              </>
+            )
+          })
+        }
       </IonContent>
       <IonFooter>
         <IonToolbar>

src/pages/Biography.tsx

@@ -12,28 +12,18 @@ import {
     IonImg,
     IonGrid,
     IonRow,
-    IonCol,
-    useIonViewWillEnter
+    IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
-import React, { useState } from 'react';
+import React from 'react';
 import './Biography.css';
 import ListBiographies from './ListBiographies';
 import Questions from './Questions';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
-import { useParams } from 'react-router';
-import { BioInfo, getMessage } from '../data/BioInfo';
+import ListBio from '../data/Biograph.json';
 
 const Biography: React.FC = () => {
-    const [BioItem, setMessage] = useState<BioInfo>();
-    const params = useParams<{ id: string }>();
-
-    useIonViewWillEnter(() => {
-        const msg = getMessage(parseInt(params.id, 10));
-        setMessage(msg);
-    });
-
     return (
         <IonPage>
             <IonHeader>
@@ -51,20 +41,22 @@ const Biography: React.FC = () => {
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">
-                {BioItem ? (
-                    <>
-                        <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                        <h1>{BioItem.title}</h1>
+                {
+                    ListBio && ListBio.map(listbio => {
+                        return (
+                            <>
+                                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                                <h1>{listbio.title}</h1>
 
-                        <p>{BioItem.tags}</p>
-                        <p>{BioItem.content}</p>
-                        <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                            <IonButton>Tomar quiz</IonButton>
-                        </IonNavLink>
-                    </>
-                ) : (
-                    <div>Message not found</div>
-                )}
+                                <p>{listbio.tags}</p>
+                                <p>{listbio.content}</p>
+                                <IonNavLink routerDirection="forward" component={() => <Questions />}>
+                                    <IonButton>Tomar quiz</IonButton>
+                                </IonNavLink>
+                            </>
+                        )
+                    })
+                }
             </IonContent>
 
             <IonFooter>

src/pages/Capsule.tsx

@@ -11,14 +11,17 @@ import {
     IonImg,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonButton
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './Capsule.css';
 import ListCapsules from './ListCapsules';
+import Biography from './Biography';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import Bomba from '../assets/BombaPuertorriquena.jpg';
+import RobertoClemente from '../assets/RobertoClemente.jpg';
 
 const Capsule: React.FC = () => {
     return (
@@ -44,6 +47,17 @@ const Capsule: React.FC = () => {
                 <p>Han existido distintas formas de danzar o bailar desde la historia muy antigua de la humanidad. En Puerto Rico el primer baile documentado por los cronistas de Indias es el llamado areito, con las variantes de escritura areyto y areíto. Era un baile coreado y musicalizado, dirigido por un guía. Esta manifestación de movimiento corporal, que Gonzalo Fernández de Oviedo llamó “bailar cantando”, fue común en los grupos indígenas de la región caribeña.</p>
                 <p>Se ejecutaba en hileras, con los participantes cogidos de las manos, de los brazos o, según Bartolomé de las Casas, “los brazos de los unos puestos sobre los hombros de los otros”. Según Pedro Mártir de Anglería, los participantes llevaban caracoles en los brazos y piernas, con los que producían “un ruido agradable”. Narraban una historia y el guía indicaba qué pasos y cantos se repetirían hasta que ésta culminara.</p>
                 <p>Aunque la llegada de los conquistadores españoles produjo una rápida desaparición de la población indígena y de cualquier expresión autóctona que las autoridades consideraran pagana, Fray Iñigo Abbad y Lasierra afirmaba en 1789 que “la diversión más apreciable para estos isleños son los bailes; los tienen sin más motivo que el de pasar el tiempo y rara vez faltan en una cosa u otra”.</p>
+
+                <h2>Information about important figures</h2>
+                <IonGrid fixed={true}>
+                    <IonRow>
+                        <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
+                        <IonNavLink routerDirection="forward" component={() => <Biography />} >
+                            <IonButton color="light">Roberto Clemente</IonButton>
+                        </IonNavLink>
+                    </IonRow>
+                </IonGrid>
+
             </IonContent>
             <IonFooter>
                 <IonToolbar>

src/pages/ListBiographies.tsx

@@ -62,7 +62,7 @@ const ListBiographies: React.FC = () => {
                     {listbio.content}
                   </IonCardContent>
                   <IonNavLink routerDirection="forward" component={() => <Biography />} >
-                    <IonButton key={listbio.id}>Go to</IonButton>
+                    <IonButton>Go to</IonButton>
                   </IonNavLink>
 
                   <IonNavLink routerDirection="forward" component={() => <Questions />}>