Vårt neste mål i vår pågående reise med den forrige appen er å konstruere "Products"-siden. Denne siden vil fungere som en plattform for å vise data levert fra data.js-filen, slik at vi kan samhandle med den.

Vi begynner med å opprette ProductsPage-komponenten. Komponentstrukturen 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 opprettet en React-komponent kalt ProductsPage. Denne komponenten er laget for å håndtere visning av en liste over selskaper;
• Hooken useState initialiserer tilstanden companies. Denne tilstanden gjør det mulig for komponenten å håndtere og reagere på endringer i listen over selskaper;
• Funksjonen handleChange er satt opp for å håndtere brukerinput og utløse oppdateringer basert på denne inputen.

Med denne ProductsPage-komponenten på plass, kan vi vise en dynamisk liste over selskaper og tillate brukerinteraksjon med dataene.