Il prossimo obiettivo nel nostro percorso con l'app precedente è costruire la pagina "Products". Questa pagina fungerà da piattaforma per visualizzare i dati forniti dal file data.js, permettendoci di interagire con essi.

Iniziamo creando il componente ProductsPage. La struttura del componente è la seguente:

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;

• È stato creato un componente React denominato ProductsPage. Questo componente è progettato per gestire il rendering di un elenco di aziende;
• L'hook useState inizializza lo stato companies. Questo stato consente al componente di gestire e rispondere alle modifiche nell'elenco delle aziende;
• La funzione handleChange è configurata per gestire l'input dell'utente e attivare aggiornamenti in base all'input.

Con questo componente ProductsPage, è possibile visualizzare dinamicamente un elenco di aziende e consentire l'interazione dell'utente con i dati.