Nuestro siguiente objetivo en nuestro recorrido con la aplicación anterior es construir la página de "Productos". Esta página servirá como una plataforma para renderizar los datos proporcionados desde el archivo data.js, permitiendo la interacción con ellos.

Comenzamos creando el componente ProductsPage. La estructura del componente es la siguiente:

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;

• Se ha establecido un componente de React llamado ProductsPage. Este componente está diseñado para gestionar el renderizado de una lista de empresas;
• El hook useState inicializa el estado companies. Este estado permitirá que el componente administre y responda a los cambios en la lista de empresas;
• La función handleChange está configurada para gestionar la entrada del usuario y activar actualizaciones basadas en dicha entrada.

Con este componente ProductsPage en su lugar, es posible renderizar una lista dinámica de empresas y permitir la interacción del usuario con los datos.