Portfolio : Affichage des données (JSX) 2/2

Désolé pour la petite erreur avec le fichier portfolioList.json.

Maintenant que le HTML est réalisé, nous allons utiliser la clé index folio entre des accolades.

Pour le titre :

<h3>{folio.titre}</h3>

Pour l'image :

<img src={folio.image} />

Pour l'alt de l'image :

<img src={folio.image} alt={folio.alt} />

Pour le lien :

<a href={folio.lien}></a>

Pour le texte du lien :

<a href={folio.lien}>{folio.texte_lien}</a>

return (
        <div className="port-card">
            <h3>{folio.titre}</h3>
            <img src={folio.image} alt={folio.alt} />
            <hr/>
            <a href={folio.lien}>{folio.texte_lien}</a>
        </div>
        )

Ne pas oublier

Retirer les apostrophes pour les différents attributs de l'image, de l'alt de l'image, et du lien.

A faire :

<a href={folio.lien}></a>

A ne pas faire :

<a href="{folio.lien}"></a>

Si vous avez l'oeil !

Vous avez surement remarqué un doublon de l'image lors de mon rendu, j'ai juste oublié de changer le lien de l'image.

Normalement si vous avez des liens uniques pour chaque image, votre rendu sera affiché correctement.