Nosso próximo objetivo em nossa jornada contínua com o aplicativo anterior é construir a página "Products". Esta página servirá como uma plataforma para renderizar os dados fornecidos pelo arquivo data.js, permitindo a interação com eles.

Começamos criando o componente ProductsPage. A estrutura do componente é a seguinte:

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;

• Estabelecemos um componente React chamado ProductsPage. Este componente é projetado para lidar com a renderização de uma lista de empresas;
• O hook useState inicializa o estado companies. Esse estado permite que o componente gerencie e responda a alterações na lista de empresas;
• A função handleChange é configurada para lidar com a entrada do usuário e acionar atualizações com base nessa entrada.

Com o componente ProductsPage em funcionamento, é possível renderizar uma lista dinâmica de empresas e permitir a interação do usuário com os dados.