Condition HTML

La structure HTML d’un composant est parfois conditionnée par les données qu’elle exploite: l’affichage ou non de certaines balises HTML peut dépendre de l’état de certaines données. Dans d'autres cas, l’affichage de certaines balises doit être répété autant de fois qu’il y a d’éléments dans un tableau.

Ce type de logique est généralement piloté par du code JavaScript à l’aide de règles conditionnelles et itératives. Les frameworks JavaScript mettent en place des expressions facilitant ce type d’implémentation directement au niveau de la définition HTML. Nous nous focaliserons dans ce chapitre sur l'expression de conditions logiques, et dans le suivant, sur les itérations.

Condition en Javascript natif

En JavaScript simple, si l’on souhaite afficher une balise HTML en fonction de l’état d’une variable, on définira généralement la balise via du code JavaScript :

html

<body></body>

if (someCondition) {
  const newElement = document.createElement("div");
  document.body.appendChild(newElement);
}

Ou bien, on cherchera à modifier les classes (ou le style) de l’élément, toujours en JavaScript :

html

<body>
  <p id="my-p">Maybe visible</p>
</body>

if (!someCondition) {
  const element = document.getElementById("my-p");
  element.className = "hidden";
}

Dans les deux cas de figure, la simple lecture du code HTML ne permet pas d'identifier que l'affichage de certains balises est conditionné par certains comportement. Il est necessaire de parcourir le code Javascript pour savoir que certaines balises sont soumise à conditions.

Condition en Framework JS

Avec un framework JavaScript, il est possible de représenter directement la logique conditionnelle au sein de la définition HTML, en s'appuyant sur l'observation de l'état d'une variable Javascript :

jsx

export default function App({ isVisible }) {
  return (
    <div>
      {isVisible ? <p>Maybe visible</p> : null}
      <p>Always visible</p>
    </div>
  );
}

Comme avec les injections HTML de variables, l'exemple contient ici l'injection d'une expression JavaScript prenant la forme d'une condition ternaire. Dans cette condition, si la props isVisible vaut true, alors le paragraphe “Maybe visible" sera ajouté, sinon null indique qu’aucun élément HTML ne sera ajouté à la balise <div>.

NOTE

👉 Pour rappel, la valeur retournée par les expressions JavaScript entre accolades est ajoutée au code HTML du composant. Cette valeur peut être un texte simple, ou bien comprendre un ensemble de balises HTML.

TIP

💡 Une syntaxe alternative consiste à utiliser l’opérateur logique && pour exprimer la condition en Javascript :

jsx

export default function App({ isVisible }) {
  return (
    <div>
      {isVisible && <p>Maybe visible</p>}
      <p>Always visible</p>
    </div>
  );
}

L’opérateur && retourne en effet la valeur à sa gauche si elle est vraie, sinon il retourne la valeur à sa droite.

Une logique similaire permet d'exprimer des expressions de type else ou else if:

jsx

export default function App({ canRetry }) {
  return (
    <div>
      {Math.random() < 0.5 ? (
        <p>You win</p>
      ) : canRetry ? (
        <p>You lose, retry</p>
      ) : (
        <p>Game over</p>
      )}
    </div>
  );
}

Plusieurs conditions ternaires sont imbriquées ici pour représenter une logique else if.

Si la valeur déterminée de façon aléatoire est inférieure à 0.5, "You win" est affiché. Sinon, si la props canRetry vaut true, "You lose, retry" est affiché. Sinon, "Game over" est affiché.

🐶 DogCenter

Les expressions conditionnelles peuvent nous aider à gérer certains cas particuliers dans l’affichage des informations de nos chiens. Il arrive que certains chiens du chenil arrivent sans que l’on connaisse leur âge. Dans ce cas, on souhaiterait simplement retirer la ligne précisant l'âge du chien dans le composant DogCard:

jsx

import './DogCard.css'

export default function DogCard({ pictureUrl, name, age, breed }) {
  return (
    <div id="dog-card">
      <img
        id="dog-picture"
        src={pictureUrl}
        alt="Dog"
      />
      <div id="dog-description">
        <h3>{name}</h3>
        {
          age !== undefined && 
          <p className="dog-description-line">Age: {age} years</p> 
        }
        <p className="dog-description-line">Breed: {breed}</p>
      </div>
    </div>
  );
};

WARNING

⚠️ Attention, il est important de spécifier ici dans la condition que la props age doit être différente de undefined, valeur prise par une props si elle n'est pas renseignée par le composant parent. age peut en effet valoir 0 si le chien est très jeune, et l'expression pourrait alors conclure à tort qu'il ne faut pas afficher l'élément.

Conclusion

Les frameworks JavaScript permettent d'expliciter le rendu conditionnel de certains éléments directement au niveau du code HTML. Cette syntaxe rend plus explicite et plus claire l'action de la condition sur la structure HTML du composant. Dans le prochain chapitre, nous déclinerons l'exercice avec l'expression de logiques itératives.

Condition HTML ​

Condition en Javascript natif ​

Condition en Framework JS ​

🐶 DogCenter ​

Conclusion ​

Condition HTML

Condition en Javascript natif

Condition en Framework JS

🐶 DogCenter

Conclusion