Notre prochain objectif dans notre progression avec l'application précédente est de construire la page « Products ». Cette page servira de plateforme pour afficher les données fournies par le fichier data.js, nous permettant ainsi d'interagir avec celles-ci.

Nous commençons par créer le composant ProductsPage. La structure du composant est la suivante :

import React, { useState } from "react";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);

  const handleChange = (e) => {
    // Handle user input and update the state (companies in this case)
  };

  return (
    <>
      <input type="text" onChange={handleChange} />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

export default ProductsPage;

• Nous avons créé un composant React nommé ProductsPage. Ce composant est conçu pour gérer l'affichage d'une liste d'entreprises ;
• Le hook useState initialise l'état companies. Cet état permet au composant de gérer et de réagir aux modifications de la liste d'entreprises ;
• La fonction handleChange est configurée pour gérer la saisie utilisateur et déclencher des mises à jour en fonction de cette saisie.

Avec ce composant ProductsPage, il est possible d'afficher dynamiquement une liste d'entreprises et de permettre l'interaction de l'utilisateur avec les données.