Seuraava tavoitteemme aiemmin rakennetun sovelluksen parissa on luoda "Products"-sivu. Tämä sivu toimii alustana, jolla näytetään data.js-tiedostosta saatavat tiedot ja mahdollistaa niiden käsittelyn.

Aloitamme luomalla ProductsPage-komponentin. Komponentin rakenne on seuraava:

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;

• Olemme luoneet React-komponentin nimeltä ProductsPage. Tämä komponentti on suunniteltu yrityslistan näyttämiseen;
• useState-hook alustaa companies-tilan. Tämä tila mahdollistaa komponentin hallita ja reagoida yrityslistan muutoksiin;
• handleChange-funktio on määritelty käsittelemään käyttäjän syötettä ja käynnistämään päivitykset syötteen perusteella.

Tämän ProductsPage-komponentin avulla voimme näyttää dynaamisen yrityslistan ja mahdollistaa käyttäjän vuorovaikutuksen datan kanssa.