Affichage conditionnel dans React

Affichage conditionnel dans React signifie qu’on peut afficher ou non certains contrôles HTML ou composants en fonction de conditions toujours côté React donc côté client sans devoir rafraîchir la totalité de la page. Comment faire ? C’est assez simple et c’est l’objet de cet article.

Projet de base

Prenons un exemple de base pour notre affichage conditionnel en React.

Imaginons une liste de personnes, un tableau d’objets donc et pour chaque objet 2 propriétés : genre (homme/femme) et nom à afficher (nom + prénom). Voici donc à quoi ressemblerait le composant:

import React from 'react';

const person = (props) => {
    return (
        <div>{ props.gender === "H" ? "Mr" : "Mme" } {props.name}</div>
    )
};

export default person;

On a donc un fichier Person.js (notre composant Person) qui permet d’afficher Mr xxx ou Mme xxx en fonction de la propriété “gender”. Pour la création de composant et les propriétés à afficher, veuillez vous référer aux articles précédents :

• Créer un composant dans React
• Passer des valeurs à un composant React

Ici on a déjà un premier IF qui permet d’afficher Mr ou Mmr si gender === “H”. Voici comment il faut interpréter le IF: SI props.gender = “H” alors afficher “Mr” sinon afficher “Mme”.

A présent, créons dans notre composant principal App.js une liste de personnes qu’on va afficher à travers ce composant :

import React, { useState } from 'react';
import './App.css';
import Person from './Person/Person';

function App() {
  const [personState, setPersonState] = useState({
    persons:[
     {gender:"H", name:"Dupont Henri"},
     {gender:"F", name:"Dupont Marie"}
  ], ShowOnlyF: false});

  return (
    <div>
    {
      personState.persons.map((value) => {
        return (<Person gender={value.gender} name={value.name}></Person>)
      })
    }
    </div>
  );
}

export default App;

On crée la liste de personnes : Homme – Dupont Henri et Femme – Dupont Marie. Ensuite on affiche toutes les personnes présentes dans ce state via le composant “Person”.

Affichage conditionnel

On va à présent ajouter une combobox “Afficher TOUT / HOMME / FEMME” qui va permettre d’afficher tout le monde, uniquement les hommes ou uniquement les femmes.

Voici le code complet de notre App.js:

function App() {
  const [personState, setPersonState] = useState({
    persons:[
     {gender:"H", name:"Dupont Henri"},
     {gender:"F", name:"Dupont Marie"}
  ], Show: "A"});

  const changeGenderHandler = (event) => {
    const modif = {...personState};
    modif.Show = event.target.children[event.target.selectedIndex].id;
    setPersonState(modif);
  };

  return (
    <div>
      <p>Montrer: 
        <select name="gender" onChange={changeGenderHandler}>
          <option id="A">All</option>
          <option id="H">Men</option>
          <option id="F">Women</option>
        </select></p>

  <p>{personState.Show}</p>

    {
      personState.persons.map((value) => {
        return (
          personState.Show === "A" || personState.Show === value.gender ?
          <Person gender={value.gender} name={value.name}></Person> : null
          )
      })
    }
    </div>
  );
}

On peut y voir notre liste d’option ALL/MEN/WOMEN qui est reliée à notre state pour modifier celui-ci lorsqu’on change la valeur de cette combobox. Ainsi, quand on sélectionne une nouvelle valeur, on passe dans la fonction changeGenderHandler qui va récupérer l’ID de l’option de la liste et la stocker dans notre variable “Show” de notre state. Comme c’est un state qu’on modifie avec setState (voir précédent article), cela va déclencher automatiquement le rafraichissement des composants liés. Ainsi, on va repasser dans notre boucle d’affichage des personnes et ne filtrer que les personnes du bon genre (homme / femme ou tout le monde).

Pour plus de détails sur les states et le binding bidirectionnel dans React, n’hésitez pas à consulter l’article suivant : “Binding bidirectionnel React”.

En résumé

Vous voyez donc que l’affichage conditionnel consiste en fait en un IF en javascript inscrit au milieu du code du rendu directement dans le return (…).

J’espère que cet article vous aura plu. N’hésitez pas à vous abonner à ce blog pour ne rien manquer et à liker, partager et commenter cet article. Je vous dis à très bientôt sur le blog developpement-web-facile.com.