Notre prochain objectif dans notre parcours continu avec l'application précédente est de construire la page "Produits". Cette page servira de plateforme pour afficher les données fournies par le fichier data.js, nous permettant d'interagir avec elles.

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 établi 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 permettra au composant de gérer et de répondre aux changements dans la liste des entreprises ;
• La fonction handleChange est configurée pour gérer les entrées utilisateur et déclencher des mises à jour basées sur l'entrée.

Avec ce composant ProductsPage en place, nous pouvons afficher une liste dynamique d'entreprises et permettre l'interaction de l'utilisateur avec les données.