React Conditionals : Affichez Dynamiquement du Contenu Basé sur des Conditions

Conditionnelles dans React

Dans React, il n'est pas possible d'utiliser directement des instructions if/else dans le JSX. Cependant, il existe plusieurs façons d'implémenter des conditions :

• Opérateur ternaire : Une manière concise d'écrire des conditions simples.
• Élément court-circuit : Utilise la logique booléenne pour rendre ou ignorer du contenu.
• Fonctions externes : Pour des conditions plus complexes, vous pouvez utiliser des fonctions JavaScript.

1. Opérateur Ternaire

L'opérateur ternaire est une méthode simple et concise pour écrire des conditions dans React. Voici un exemple où un message différent est affiché selon la valeur d'une variable :

📋 Copier le code

function Message({ isConnected }) {
return (
<div>
{isConnected ? (
	<p>Bienvenue ! Vous êtes connecté.</p>
) : (
	<p>Veuillez vous connecter pour continuer.</p>
)}
</div>
);
}

ReactDOM.render(<Message isConnected={true} />, document.getElementById('root'));

Explication détaillée :

1. function Message({ isConnected }) { ... } :
   • Cette fonction définit un composant appelé Message qui accepte une prop appelée isConnected.
2. {isConnected ? (...) : (...)} :
   • Cet opérateur ternaire vérifie la valeur de isConnected.
   • Si isConnected est vrai (true), le premier élément <p> est rendu.
   • Sinon, le deuxième élément <p> est affiché.
3. ReactDOM.render(<Message isConnected={true} />, document.getElementById('root')); :
   • Cette ligne rend le composant Message avec la prop isConnected définie à true.
   • Le message "Bienvenue ! Vous êtes connecté." sera affiché dans ce cas.

2. Élément Court-Circuit

L'élément court-circuit est une autre méthode pour afficher du contenu conditionnellement. Il s'agit d'une technique utilisant la logique booléenne pour rendre ou ignorer un élément. Voici un exemple :

📋 Copier le code

function Bienvenue({ nom }) {
const utilisateurConnecte = nom;

return (
<div>
{utilisateurConnecte && <p>Bienvenue, {nom} !</p>}
</div>
);
}

ReactDOM.render(<Bienvenue nom="Alice" />, document.getElementById('root'));

Explication détaillée :

1. const utilisateurConnecte = nom; :
   • Cette variable représente l'état de connexion de l'utilisateur.
2. {utilisateurConnecte && <p>Bienvenue, {nom} !</p>} :
   • Ce fragment utilise la logique booléenne pour afficher le contenu uniquement si utilisateurConnecte est vrai.
   • Ici, si nom a une valeur (non vide ou non nulle), le texte "Bienvenue, Alice !" sera affiché.
3. ReactDOM.render(<Bienvenue nom="Alice" />, document.getElementById('root')); :
   • Cette ligne rend le composant Bienvenue avec la prop nom définie à "Alice".

3. Fonctions Externes pour des Conditions Complexes

Pour des conditions plus complexes, il est souvent préférable d'utiliser des fonctions externes. Voici un exemple où une fonction détermine quel message doit être affiché :

📋 Copier le code

function determinerMessage(connected) {
if (connected) {
return <p>Bienvenue ! Vous êtes connecté.</p>;
} else {
return <p>Veuillez vous connecter pour continuer.</p>;
}
}

function Message({ isConnected }) {
return (
<div>
{determinerMessage(isConnected)}
</div>
);
}

ReactDOM.render(<Message isConnected={false} />, document.getElementById('root'));

Explication détaillée :

1. function determinerMessage(connected) { ... } :
   • Cette fonction prend un paramètre connected et retourne un élément JSX en fonction de sa valeur.
2. {determinerMessage(isConnected)} :
   • Ce fragment appelle la fonction determinerMessage pour déterminer quel message doit être affiché.
3. ReactDOM.render(<Message isConnected={false} />, document.getElementById('root')); :
   • Cette ligne rend le composant Message avec la prop isConnected définie à false.
   • Le message "Veuillez vous connecter pour continuer." sera affiché dans ce cas.

4. Exemple Complet : Affichage Conditionnel dans un Formulaire

Imaginons que vous souhaitiez afficher un message d'erreur lorsque l'utilisateur ne remplit pas un champ obligatoire dans un formulaire. Voici comment cela peut être fait :

📋 Copier le code

import React, { useState } from 'react';

function Formulaire() {
const [nom, setNom] = useState("");

function handleSubmit(event) {
event.preventDefault();
if (nom.trim() === "") {
alert("Veuillez entrer un nom valide !");
} else {
alert(`Merci, ${nom} !`);
}
}

return (
<form onSubmit={handleSubmit}>
<label>
	Entrez votre nom :
	<input type="text" value={nom} onChange={(e) => setNom(e.target.value)} />
</label>
<button type="submit">Envoyer</button>
{nom.trim() === "" && <p style={{ color: "red" }}>Ce champ est obligatoire.</p>}
</form>
);
}

ReactDOM.render(<Formulaire />, document.getElementById('root'));

Explication détaillée :

1. const [nom, setNom] = useState(""); :
   • Initialise l'état nom avec une chaîne vide.
   • setNom est une fonction pour mettre à jour cet état.
2. function handleSubmit(event) :
   • Cette fonction est appelée lors de la soumission du formulaire.
   • event.preventDefault() empêche le comportement par défaut du navigateur (rechargement de la page).
   • Si nom.trim() === "", une alerte indiquant que le champ est obligatoire est affichée.
   • Sinon, une alerte personnalisée contenant le nom est affichée.
3. {nom.trim() === "" && <p style={{ color: "red" }}>Ce champ est obligatoire.</p>} :
   • Ce fragment utilise la logique booléenne pour afficher un message d'erreur si le champ est vide.

Meilleures Pratiques pour les Conditionnelles

Pour utiliser les conditionnelles efficacement dans vos applications React, voici quelques conseils :

• Privilégiez l'opérateur ternaire pour des conditions simples : Il rend le code plus concis et lisible.
• Utilisez des fonctions externes pour des conditions complexes : Cela améliore la maintenabilité et clarifie le JSX.
• Évitez les instructions if/else directement dans JSX : Préférez des fonctions ou des variables pour garder le JSX propre.

Conclusion

Vous avez maintenant appris à utiliser les conditionnelles dans React pour afficher dynamiquement du contenu basé sur des conditions. En combinant opérateur ternaire, logique booléenne et fonctions externes, vous pouvez créer des interfaces utilisateur interactives et intelligentes.

Prochain chapitre : Listes React