Last modification

src/data/BioInfo.ts

@@ -0,0 +1,13 @@
+import ListBio from '../data/Biograph.json';
+
+export interface BioInfo {
+    id: number;
+    title: string;
+    content: string;
+    tags: string;
+    photo: string;
+}
+
+export const getMessages = () => ListBio;
+
+export const getMessage = (id: number) => ListBio.find(m => m.id === id);

src/pages/Biography.tsx

@@ -12,17 +12,28 @@ import {
     IonImg,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    useIonViewWillEnter
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
-import React from 'react';
+import React, { useState } 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';
 
 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>
@@ -40,16 +51,20 @@ const Biography: React.FC = () => {
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">
-                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                <h1>Roberto Clemente</h1>
-
-                <p>Pelotero, Filántropo</p>
-                <p>Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.</p>
-                <p>Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.</p>
+                {BioItem ? (
+                    <>
+                        <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                        <h1>{BioItem.title}</h1>
 
-                <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                    <IonButton>Tomar quiz</IonButton>
-                </IonNavLink>
+                        <p>{BioItem.tags}</p>
+                        <p>{BioItem.content}</p>
+                        <IonNavLink routerDirection="forward" component={() => <Questions />}>
+                            <IonButton>Tomar quiz</IonButton>
+                        </IonNavLink>
+                    </>
+                ) : (
+                    <div>Message not found</div>
+                )}
             </IonContent>
 
             <IonFooter>

src/pages/ListBiographies.tsx

@@ -61,21 +61,18 @@ const ListBiographies: React.FC = () => {
                   </IonCardHeader><IonCardContent>
                     {listbio.content}
                   </IonCardContent>
-                  <IonNavLink routerDirection="forward" component={() => <Biography />}>
-                    <IonButton>Go to</IonButton>
+                  <IonNavLink routerDirection="forward" component={() => <Biography />} >
+                    <IonButton key={listbio.id}>Go to</IonButton>
                   </IonNavLink>
 
                   <IonNavLink routerDirection="forward" component={() => <Questions />}>
                     <IonButton>Tomar quiz</IonButton>
                   </IonNavLink>
-
                 </IonCard>
               </>
             )
           })
         }
-
-
       </IonContent>
       <IonFooter>
         <IonToolbar>