Code conditionnel en React.JS

Dans ce chapitre, nous allons voir comment gérer du code conditionnel.

Pour une raison esthétique, j'ai choisi de remplacer les checkboxes par des icônes Fontawesome.

Il va donc falloir simuler le fonctionnement des checkboxes.

Le code conditionnel en JSX

Le code conditionnel est géré en JSX grâce aux opérateurs ternaires (ou opérateurs conditionnels). Vous pouvez consulter la documentation ici : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Cet opérateur s'écrit sous cette forme :

uneCondition ? resultatPositif : resultatNégatif

Il commence par une condition, suivie d'un point d'interrogation. Juste derrière, on place la valeur retournée si la condition vaut "true", suivie de deux points (":"). Enfin, on place la valeur à retourner si la condition vaut "false".

Dans notre application, nous l'utiliserons pour ajouter modifier la classe CSS des "checkboxes" si notre tâche est terminée :

<i className={ "far fa-2x " + (todo.done?"fa-check-square":"fa-square") }></i>