Table des matières

Le Tutoriel de ReactJS Lists et Keys

View more Tutorials:

1- React Lists

En  Javascript, vous voulez créer un nouveau tableau à partir d'un tableau disponible en convertissant chaque élément du tableau d'origine pour créer l'élément correspondant du nouveau tableau, vous pouvez utiliser la méthode map().
Pour plus de simplicité, consultez l'exemple SVP, vous avez un tableau de nombres entiers, tels que [1, 2, 5], et vous voulez créer un autre tableau en multipliant chaque élément du tableau initial par 10.
var arr1 = [1, 2, 5];

console.log(arr1); // --> [1, 2, 5]

var arr2 = arr1.map( e  => e * 10 );

console.log(arr2); // --> [10, 20, 50]
En  JSX vous pouvez également faire la même chose, à partir d'un tableau d'objets, créez un nouveau tableau contenant des étiquettes (Tag) :
var array1 = [        
  { empId: 1, fullName: "Trump", gender: "Male" },        
  { empId: 2, fullName: "Ivanka", gender: "Female" },        
  { empId: 3, fullName: "Kushner", gender: "Male" }        
];

var array2 = array1.map (
    e =>
    <Emloyee fullName={e.fullName} gender={e.gender} />  
);

Exemple :

Dans cet exemple, j'ai un tableau contenant des informations sur les employés (employee) et je vais afficher les informations de ces employés sur l'interface, comme illustré ci-dessous.
lists-example.jsx
// Employee Component
class Employee extends React.Component {
  render() {
    return (
      <li className="employee">
        <div>
          <b>Full Name:</b> {this.props.fullName}
        </div>
        <div>
          <b>Gender:</b> {this.props.gender}
        </div>
      </li>
    );
  }
}

// EmployeeList Component
class EmployeeList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [
        { empId: 1, fullName: "Trump", gender: "Male" },
        { empId: 2, fullName: "Ivanka", gender: "Female" },
        { empId: 3, fullName: "Kushner", gender: "Male" }
      ]
    };
  }

  render() {
    // Array of <Employee>
    var listItems = this.state.employees.map(e => (
      <Employee fullName={e.fullName} gender={e.gender} />
    ));
    return (
        <ul className="employee-list">
           {listItems}
        </ul>
      );
  }
}

// Render
ReactDOM.render(<EmployeeList />, document.getElementById("employeelist1"));
lists-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Lists</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      <style>
         .employee-list  {
           border:1px solid #cbbfab;
           list-style-type : none;
           padding: 5px;
           margin: 5px;
         }
         .employee {
            border: 1px solid #ccc;
            margin: 5px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>React Lists:</h3>

      <div id="employeelist1"></div>

      <script src="lists-example.jsx" type="text/babel"></script>
   </body>
</html>
Voir plus de cette méthode  map() de  Array :

2- React Keys

Keys (Clés) permet à  React de distinguer des  item dans une liste. Il permet à  React de gérer les  item changés, des nouveaux  item sont ajoutés, ou des  item sont extrait de la liste.
A partir d'un tableau d'objets, vous créez un nouveau tableau contenant des étiquettes (tag), qui doivent avoir l'attribut key, et leurs valeurs ne sont pas pareilles.
keys-example.jsx
// Employee Component
class Employee extends React.Component {
  render() {
    return (
      <li className="employee">
        <div>
          <b>Full Name:</b> {this.props.fullName}
        </div>
        <div>
          <b>Gender:</b> {this.props.gender}
        </div>
      </li>
    );
  }
}

// EmployeeList Component
class EmployeeList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [
        { empId: 1, fullName: "Trump", gender: "Male" },
        { empId: 2, fullName: "Ivanka", gender: "Female" },
        { empId: 3, fullName: "Kushner", gender: "Male" }
      ]
    };
  }

  render() {
    // Array of <Employee>
    var listItems = this.state.employees.map(e => (
      <Employee key={e.empId} fullName={e.fullName} gender={e.gender} />
    ));
    return (
        <ul className="employee-list">
           {listItems}
        </ul>
      );
  }
}

// Render
ReactDOM.render(<EmployeeList />, document.getElementById("employeelist1"));
key-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Lists</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      <style>
         .employee-list  {
           border:1px solid #cbbfab;
           list-style-type : none;
           padding: 5px;
           margin: 5px;
         }
         .employee {
            border: 1px solid #ccc;
            margin: 5px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>React Lists:</h3>

      <div id="employeelist1"></div>

      <script src="keys-example.jsx" type="text/babel"></script>
   </body>
</html>

View more Tutorials: