Vores næste mål i vores fortsatte arbejde med den tidligere app er at konstruere "Products"-siden. Denne side vil fungere som en platform til at vise data leveret fra data.js-filen, hvilket giver os mulighed for at interagere med dem.

Vi starter med at oprette ProductsPage-komponenten. Komponentens struktur er som følger:

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;

• Vi har oprettet en React-komponent ved navn ProductsPage. Denne komponent er designet til at håndtere visningen af en liste over virksomheder;
• useState-hooket initialiserer tilstanden companies. Denne tilstand gør det muligt for komponenten at administrere og reagere på ændringer i listen over virksomheder;
• Funktionen handleChange er opsat til at håndtere brugerinput og udløse opdateringer baseret på inputtet.

Med denne ProductsPage-komponent kan vi vise en dynamisk liste over virksomheder og muliggøre brugerinteraktion med dataene.