Unser nächstes Ziel auf unserer fortlaufenden Reise mit der vorherigen App ist die Erstellung der "Products"-Seite. Diese Seite dient als Plattform zur Darstellung von Daten aus der Datei data.js und ermöglicht die Interaktion mit diesen Daten.

Wir beginnen mit der Erstellung der Komponente ProductsPage. Die Struktur der Komponente ist wie folgt:

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;

• Wir haben eine React-Komponente mit dem Namen ProductsPage erstellt. Diese Komponente ist dafür vorgesehen, eine Liste von Unternehmen darzustellen;
• Der useState-Hook initialisiert den Zustand companies. Dieser Zustand ermöglicht es der Komponente, Änderungen in der Unternehmensliste zu verwalten und darauf zu reagieren;
• Die Funktion handleChange ist eingerichtet, um Benutzereingaben zu verarbeiten und Aktualisierungen basierend auf diesen Eingaben auszulösen.

Mit dieser ProductsPage-Komponente können wir eine dynamische Liste von Unternehmen rendern und die Interaktion der Benutzer mit den Daten ermöglichen.