Work : Affichage des données (JSX)

Comme le fichier portfolio.js, nous allons importer les données de workList.json dans le fichier work.js.

A la première ligne, nous allons écrire :

import workList from '../data/workList.json';

Après la balise h1, nous allons ouvrir les accolades :

{workList.map ((work => {

}))}

A l'intérieur des derniers accolades ouverts, nous allons mettre return puis nous allons déplacer toute la div avec pour className : work-container à l'intérieur de return.

{workList.map((work => {
    return (
        <div className="work-container">
            <div className="work-left">
                <h2></h2>
                <p><time></time></p>
            </div>
            <div className="work-right">
              <h3></h3>
              <p></p>
            </div>
        </div>
    )
}))}

Enfin, nous allons pouvoir écrire les différentes clés :

{work.titre} entre les balises h2.
{work.time} entre les balises time.
{work.sous_titre} entre les balises h3.
{work.description} entre les balises p.

{workList.map((work => {
    return (
        <div className="work-container">
            <div className="work-left">
                <h2>{work.titre}</h2>
                <p><time>{work.time}</time></p>
            </div>
            <div className="work-right">
              <h3>{work.sous_titre}</h3>
              <p>{work.description}</p>
            </div>
        </div>
    )
}))}