Setting Up a React Component

Our next goal in our ongoing journey with the previous app is to construct the "Products" page. This page will serve as a platform for rendering data provided from the data.js file, allowing us to interact with it.

We begin by creating the ProductsPage component. The component structure is as follows:

js
Kopier kode
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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;

• We've established a React component named ProductsPage. This component is designed to handle the rendering of a list of companies;
• The useState hook initializes the companies state. This state will enable the component to manage and respond to changes in the list of companies;
• The handleChange function is set up to handle user input and trigger updates based on the input.

With this ProductsPage component in place, we can render a dynamic list of companies and allow user interaction with the data.