L'élégance concise du ternaire en jsx

L'opérateur conditionnel ternaire est un outil puissant et concis offert par JavaScript, particulièrement bien adapté au rendu conditionnel directement à l'intérieur de JSX en React. Sa syntaxe, `condition ? expressionSiVrai : expressionSiFaux`, permet d'évaluer une condition et de retourner l'une des deux expressions en fonction du résultat.

Contrairement à l'instruction `if`, l'opérateur ternaire est une *expression*, ce qui signifie qu'il produit une valeur. C'est cette caractéristique qui le rend directement utilisable entre les accolades `{}` dans votre JSX. Il offre une alternative compacte à la déclaration de variables intermédiaires ou à l'écriture de fonctions séparées pour des conditions simples.

Lorsque vous avez besoin d'afficher l'un ou l'autre élément (ou valeur) basé sur une seule condition, l'opérateur ternaire brille par sa capacité à intégrer cette logique de manière fluide et lisible au sein même de la structure de votre composant. Il contribue à garder le code de rendu plus proche de sa logique conditionnelle associée.

Mise en oeuvre : exemples concrets avec le ternaire

Reprenons notre exemple du composant `Greeting` qui affiche un message différent selon l'état de connexion. Avec l'opérateur ternaire, l'implémentation devient plus directe :

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  return (
    

      {
        isLoggedIn 
          ? 
Bienvenue !
 
          : 
Veuillez vous connecter.
      }
      {/* Autre contenu du composant */}
    
  );
}

// 

Cet opérateur est également très pratique pour conditionner des attributs, comme une classe CSS ou le texte d'un bouton. Imaginons un bouton 'Lire la suite' / 'Réduire' :

function ReadMoreButton({ isExpanded, onClick }) {
  return (
    
      {isExpanded ? 'Réduire' : 'Lire la suite'}
    
  );
}

// Utilisation avec un état local gérant isExpanded
// const [isExpanded, setIsExpanded] = useState(false);
//  setIsExpanded(!isExpanded)} />

Bien que très utile pour les conditions binaires simples, l'opérateur ternaire peut rapidement nuire à la lisibilité s'il est imbriqué (un ternaire dans un autre ternaire). Pour des logiques plus complexes avec plusieurs `else if`, l'instruction `if` traditionnelle ou d'autres stratégies peuvent s'avérer plus claires et maintenables. Utilisez-le judicieusement pour conserver un code expressif et compréhensible.