Cours 03 - Manipulation du JSX et routeur dynamique

Intégration de la logique à l’intérieur du JSX

Affichage d’une liste d’éléments

Il sera souvent nécessaire d’afficher plusieurs fois la même composante à partir des éléments d’un tableau.

Comme il n’est pas possible de rédiger un bloc d’instructions (boucles, conditions ou tout code impliquant un corps délimité par des accolades) dans du JSX, on utilise souvent la méthode map qui s’appelle sur un tableau afin de convertir des données en JSX:

const auteursSF = [
  "Isaac Asimov",
  "Philip K. Dick",
  "Arthur C. Clarke",
  "Frank Herbert",
  "Ursula K. Le Guin",
  "H. G. Wells",
  "Jules Verne",
  "Dan Simmons",
  "Liu Cixin",
  "Alastair Reynolds",
  "Ted Chiang",
  "Brandon Sanderson"
];

const listeAuteurs = auteursSF.map((auteur) => (<li>{auteur}</li>));

return (
  <ul>{listeAuteurs}</ul>
);

Ou plutôt:

return (
  <ul>
    {auteursSF.map((auteur) => (<li>{auteur}</li>))}
  </ul>
);

Une erreur de ce genre devrait cependant s’afficher dans la console:

Warning: Each child in a list should have a unique “key” prop.

Effectivement, React nécessite qu’on attribue un prop unique key à chaque élément du nouveau tableau. N’importe quelle valeur qui demeurera unique dans le tableau fera l’affaire.

Dans ce cas-ci, il est plutôt correct de croire que le nom de chacun des auteurs demeurera unique dans cette liste.

const listeAuteurs = auteursSF.map((auteur) => (<li key={auteur}>{auteur}</li>));

Attention

React utilise la prop key afin de suivre la position des éléments à l’intérieur du tableau lorsque l’on y effectue des ajouts/retraits/tris.

Il est donc déconseillé d’utiliser la position de l’élément comme key étant donné que celui-ci viendrait qu’à changer après les manipulations.

// le code suivant pourrait avoir un comportement imprévisible
// si on manipule le tableau par la suite
const listeAuteurs = auteursSF.map((auteur, i) => {
  return <li key={i}>{auteur}</li>;
});

Remarque

En plus d’utliser la méthode .map, d’autres méthodes effectuant des itérations sur un tableau seront souvent utilisées:

• map: Transforme chaque élément d’un tableau
• filter: Ne conserve que les éléments répondant à une condition.
• find: Retourne le premier élément répondant à une condition.
• some: Retourne un booléen indiquant si au moins un élément répond à une condition.
• every: Retourne un booléen indiquant si tous les éléments répondent à une condition.
• findIndex: Retourne la position du premier élément répondant à une condition.
• reduce: Permet de combiner plusieurs élément en une seule valeur (ex: la somme d’un tableau de nombres)

Toutes ces méthodes ne modifient pas le tableau d’origine. On les dit immuables ou non destructives.

Affichage conditionnel d’une portion du JSX

Il arrivera souvent que l’on voudra afficher ou non une portion de JSX en fonction d’une condition. On pourra évidemment passer par une fonction pour ce faire, mais le tout alourdit la tâche.

Comme on ne peut pas déclarer de bloc à l’intérieur du JSX, l’une des stratégies est d’utiliser un opérateur ternaire.

  /* L'opérateur ternaire permet d'afficher une ou l'autre
    des balises en fonction de la condition */
const MaComposante = ({isEditable}) => {
    return (
        <div>
            { isEditable ? (<p>Du texte</p>) : (<input type="text" value="du texte"/>)}
        </div>
    );
};

/*  Une classe pourrait aussi être ajoutée conditionnellement  */
const MonAutreComposante = ({isSelected}) => {
    return (
        <div className={isSelected ? 'selected': 'not-selected'}> {/**/}
            <p>Du texte</p>
        </div>
    );
};

Dans les cas où on veut afficher ou non une portion de code sans vouloir fournir d’alternative, une des façons de procéder serait la suivante:

const SayMyName = ({isVisible}) => {
    return (
        <div> {/* Cette approche est valide, mais on procède souvent autrement. */}
            { isVisible ? ( <p>Du texte</p> ) : null }
        </div>
    );
};

Bien que cette approche soit valide et fonctionnelle, on utilise plus souvent la syntaxe suivante:

const SayMyName = ({isVisible}) => {
    return (
        <div> {/* Le paragraphe sera affiché si isVisible est true. Sinon rien ne sera affiché dans le div. */}
            { isVisible && ( <p>Du texte</p> ) }
        </div>
    );
};

Remarque

Quand on exécute la commande suivante console.log(5 > 1 && 'allo');, le résultat affiché est 'allo'. Cela veut donc dire que ce qui est au bout de la condition est retourné si le début de la condition est true. C’est pour cette raison que la syntaxe ci-dessus est valide.

L’App Router (suite)

not-found.jsx

Au même titre que page.jsx et layout.jsx, not-found.jsx permet d’afficher une composante personnalisée dans le cas où un url ne correspond à aucun segment de l’application.

En remontant depuis l’url erroné vers le dossier app, le premier fichier not-found.jsx trouvé sera utilisé (dans lequel il faut exporter une composante par défaut).

Le contenu de la composante exportée dans not-found.jsx est aussi affiché si une composante serveur appelle notFound().

Segment d’url dynamique

Il arrive souvent qu’un segment de l’url nécessite d’être flexible puisqu’il correspondra à une valeur changeante comme un id, un slug, une catégorie…

Il faut dans ce cas utiliser une syntaxe particulière afin de rendre ce segment dynamique: on donnera un nom à ce paramètre dynamique en l’insérant entre des crochets. Ex: [slug], ou [projetId].

• Répertoireapp/

  • page.jsx
  • Répertoireprojets/

    • Répertoire[projetId] // projetId sera le nom du paramètre dynamique

      • page.jsx

Le fichier page.jsx ci-dessus serait donc affiché pour des urls comme:

• /projets/quiz
• /projets/synthese
• /projets/4

Récupération de la valeur du paramètre dynamique

Depuis la composante de page.jsx, on pourra ensuite récupérer le paramètre dynamique depuis les props sous le nom params:

/projets/[projetId]/page.jsx

  // Affiché depuis l'url /projets/synthese

  const ProjetPage = async ({params}) => {
      // correspond au nom du dossier dynamique
      const {projetId} = await params;

      return (
          <div>
              {/* Affiche le projet: synthese */}
              <h1>Slug du projet: {projetId}</h1>
          </div>
      );
  };

Remarque

Vous noterez l’utilisation de la combinaison async/await dans la récupération des paramètres.

Next.js a rendu asynchrone l’accès aux paramètres afin de permettre un premier rendu partiel avant de traiter les paramètres obtenus.

Une fois le paramètre récupéré, on procédera souvent aux opérations suivantes:

1. Requête à une base de données ou une autre source externe afin de récupérer tous les détails correpondant au paramètre récupéré.

   On peut aussi parcourir un tableau de données en utilisant la méthode find afin de récupérer les détails.

2. Affichage des détails récupérés ou appel de notFound() si le paramètre ne correspond à aucune ressource.