LabEx
EntrerRejoindre

Tableau React dynamique avec des données primitives

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer comment utiliser React pour rendre dynamiquement un tableau avec des lignes créées à partir d'un tableau de primitifs. Plus précisément, nous allons utiliser la méthode Array.prototype.map() pour mapper chaque élément du tableau de données à un élément <tr> avec une clé appropriée et l'afficher dans un tableau avec deux colonnes : ID et Valeur. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser React pour créer des tableaux dynamiques et réactifs.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Tableau de données

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Créez un élément de tableau avec deux colonnes, ID et Valeur, où chaque ligne est générée dynamiquement à partir d'un tableau de valeurs primitives.

Pour y parvenir, utilisez la méthode Array.prototype.map() pour créer un nouveau tableau d'éléments JSX représentant chaque élément du tableau d'entrée data en tant qu'élément <tr> avec une key appropriée. Dans chaque <tr>, ajoutez deux éléments <td> pour afficher respectivement l'index et la valeur de la ligne.

Voici une implémentation d'exemple :

const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Valeur</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Pour utiliser ce composant avec un tableau de noms de personnes, par exemple, vous pouvez l'appeler comme suit :

const people = ["John", "Jesse"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <DataTable data={people} />
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Tableau de données. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.