Affichage des données avec les props

Jusqu'à présent, si vous réutilisiez votre composant <Header />, il afficherait le même contenu à chaque fois.

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

Mais que faire si vous souhaitez passer un texte différent ou si vous ne connaissez pas les informations à l'avance parce que vous récupérez des données depuis une source externe ?

Les éléments HTML classiques possèdent des attributs que vous pouvez utiliser pour transmettre des informations qui modifient leur comportement. Par exemple, changer l'attribut src d'un élément <img> modifie l'image affichée. Changer l'attribut href d'une balise <a> modifie la destination du lien.

De la même manière, vous pouvez transmettre des informations sous forme de propriétés aux composants React. On appelle cela des props. Prenons par exemple les variations possibles d'un bouton :

Comme pour une fonction JavaScript, vous pouvez concevoir des composants qui acceptent des arguments personnalisés (ou props) modifiant leur comportement ou ce qui est affiché lors du rendu à l'écran. Vous pouvez ensuite transmettre ces props des composants parents aux composants enfants.

Remarque : Dans React, les données circulent de haut en bas dans l'arborescence des composants. C'est ce qu'on appelle le flux de données unidirectionnel. L'état (state), dont nous parlerons dans le prochain chapitre, peut être transmis des composants parents aux enfants via les props.

Utilisation des props

Dans votre composant HomePage, vous pouvez passer une prop personnalisée title au composant Header, comme vous le feriez avec des attributs HTML :

function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

Et Header, le composant enfant, peut accepter ces props comme premier paramètre de fonction :

function Header(props) {
  return <h1>Develop. Preview. Ship.</h1>;
}

Si vous utilisez console.log() sur props, vous verrez qu'il s'agit d'un objet avec une propriété title.

function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

Comme props est un objet, vous pouvez utiliser la déstructuration d'objet pour nommer explicitement les valeurs des props dans vos paramètres de fonction :

function Header({ title }) {
  console.log(title); // "React"
  return <h1>Develop. Preview. Ship.</h1>;
}

Vous pouvez ensuite remplacer le contenu de la balise <h1> par votre variable title.

function Header({ title }) {
  console.log(title);
  return <h1>title</h1>;
}

Si vous ouvrez votre fichier dans le navigateur, vous verrez qu'il affiche le mot "title" littéralement. C'est parce que React pense que vous souhaitez afficher une chaîne de texte brute dans le DOM.

Vous avez besoin d'un moyen pour indiquer à React qu'il s'agit d'une variable JavaScript.

Utilisation de variables dans JSX

Pour utiliser la prop title, ajoutez des accolades {}. Il s'agit d'une syntaxe JSX spéciale qui vous permet d'écrire du JavaScript directement dans votre balisage JSX.

function Header({ title }) {
  console.log(title);
  return <h1>{title}</h1>;
}

Vous pouvez considérer les accolades comme un moyen d'entrer dans le "monde JavaScript" tout en étant dans le "monde JSX". Vous pouvez ajouter n'importe quelle expression JavaScript (quelque chose qui s'évalue en une seule valeur) entre accolades. Par exemple :

1. Une propriété d'objet avec la notation par points :

function Header(props) {
  return <h1>{props.title}</h1>;
}

2. Un template littéral :

function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}

3. La valeur retournée par une fonction :

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}
 
function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

4. Ou des opérateurs ternaires :

function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

Vous pouvez maintenant passer n'importe quelle chaîne à votre prop title, ou, si vous avez utilisé l'opérateur ternaire, vous pouvez même ne pas passer de prop title du tout, puisque vous avez prévu un cas par défaut dans votre composant :

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

Votre composant accepte maintenant une prop title générique que vous pouvez réutiliser dans différentes parties de votre application. Il vous suffit de modifier la chaîne title :

function HomePage() {
  return (
    <div>
      <Header title="React" />
      <Header title="A new title" />
    </div>
  );
}

Itération à travers des listes

Il est courant d'avoir des données que vous devez afficher sous forme de liste. Vous pouvez utiliser des méthodes de tableau pour manipuler vos données et générer des éléments d'interface identiques en style mais contenant des informations différentes.

Ajoutez le tableau de noms suivant à votre composant HomePage :

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Vous pouvez ensuite utiliser la méthode array.map() pour parcourir le tableau et une fonction fléchée pour mapper un nom à un élément de liste :

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Notez comment vous avez utilisé des accolades pour naviguer entre le "monde JavaScript" et le "monde JSX".

Si vous exécutez ce code, React vous donnera un avertissement concernant une prop key manquante. C'est parce que React a besoin d'un moyen d'identifier de manière unique les éléments d'un tableau pour savoir quels éléments mettre à jour dans le DOM.

Vous pouvez utiliser les noms pour l'instant puisqu'ils sont uniques, mais il est recommandé d'utiliser quelque chose de garanti unique, comme un ID d'élément.

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Ressources supplémentaires :

• Passer des props à un composant
• Rendre des listes
• Rendu conditionnel