Utilisation de l’opérateur ternaire pour l’affichage en React
L’opérateur ternaire est une manière très pratique de réaliser des conditions dans votre code JavaScript. Il est très utilisé dans React pour le rendu conditionnel dans le JSX.
Qu’est-ce que l’opérateur ternaire ?
L’opérateur ternaire est une forme compacte d’une instruction `if-else`. Il est appelé « ternaire » parce qu’il implique trois opérants. La syntaxe générale de l’opérateur ternaire est `condition ? expressionSiVraie : expressionSiFausse`.
Par exemple :
let nombre = 10;
let resultat = (nombre > 5) ? 'Le nombre est supérieur à 5' : 'Le nombre est inférieur ou égal à 5';Comment utiliser l’opérateur ternaire dans React ?
Dans React, l’opérateur ternaire est souvent utilisé pour le rendu conditionnel. C’est une manière d’afficher différents éléments ou composants en fonction de certaines conditions.
Prenons l’exemple d’un composant qui affiche une salutation différente en fonction de l’heure de la journée :
import React from 'react';
class Salutation extends React.Component {
render() {
let heureActuelle = new Date().getHours();
return (
{heureActuelle < 12 ? (
Bonjour !
) : (
Bonsoir !
)}
);
}
}
export default Salutation;Dans cet exemple, nous utilisons l’opérateur ternaire pour décider si nous devrions afficher « Bonjour ! » ou « Bonsoir ! ». Si `heureActuelle` est inférieure à 12, alors « Bonjour ! » est affiché, sinon « Bonsoir ! » est affiché.
Conclusion
L’opérateur ternaire est un outil très puissant pour rendre votre code plus lisible et plus concis. Il est particulièrement utile dans React pour créer des affichages conditionnels dans votre JSX. Avec la pratique, l’opérateur ternaire deviendra une partie intégrante de votre boîte à outils de développement React.
