Unser nächstes Ziel auf unserer fortlaufenden Reise mit der vorherigen App ist es, die "Produkte"-Seite zu erstellen. Diese Seite wird als Plattform dienen, um die aus der Datei data.js bereitgestellten Daten darzustellen und mit ihnen zu interagieren.

Wir beginnen mit der Erstellung der ProductsPage-Komponente. 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 namens ProductsPage erstellt. Diese Komponente ist dafür ausgelegt, die Darstellung einer Liste von Unternehmen zu verwalten;
• Der useState Hook initialisiert den companies Zustand. Dieser Zustand ermöglicht es der Komponente, Änderungen in der Liste der Unternehmen zu verwalten und darauf zu reagieren;
• Die handleChange Funktion ist eingerichtet, um Benutzereingaben zu verarbeiten und Aktualisierungen basierend auf der Eingabe auszulösen.

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