Building a Modal Component for a React Product List and Functional Cart – Part 4 in React.js #coding #react #js

In this tutorial, we will be creating a modal in React.js to display more details of a product when a user clicks on it in the product list. This will allow us to provide more information about a product without cluttering the product list page with excessive text. We will be using React hooks to create a functional component that renders a modal when a product is clicked.

Before we start with creating a modal, make sure you have already set up your React project and have a basic understanding of React hooks, such as useState and useEffect. If you haven’t done so, you can refer to the previous parts of this tutorial series to get up to speed.

Let’s begin by creating the Modal component. Create a new file named Modal.js in the components folder of your project. In this file, we will define our Modal component as follows:

import React from 'react';

const Modal = ({ product, closeModal }) => {
  return (
    <div className="modal">
      <div className="modal-content">
        <h2>{product.name}</h2>
        <p>{product.description}</p>
        <p>Price: ${product.price}</p>
        <button onClick={closeModal}>Close</button>
      </div>
    </div>
  );
};

export default Modal;

In this component, we are receiving two props: product and closeModal. The product prop contains the details of the product that we want to display in the modal, and the closeModal prop is a function that will close the modal when the user clicks the "Close" button.

Next, we need to update our ProductList component to display the modal when a product is clicked. Modify the ProductList component as follows:

import React, { useState } from 'react';
import Modal from './Modal';

const ProductList = ({ products }) => {
  const [selectedProduct, setSelectedProduct] = useState(null);

  const openModal = (product) => {
    setSelectedProduct(product);
  };

  const closeModal = () => {
    setSelectedProduct(null);
  };

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>{product.description}</p>
          <p>Price: ${product.price}</p>
          <button onClick={() => openModal(product)}>View Details</button>
        </div>
      ))}
      {selectedProduct && <Modal product={selectedProduct} closeModal={closeModal} />}
    </div>
  );
};

export default ProductList;

In this updated component, we are using useState to manage the selectedProduct state, which represents the product that the user has selected to view in the modal. We also define openModal and closeModal functions to update the selectedProduct state based on user actions.

Finally, update your App component to include the ProductList component:

import React from 'react';
import ProductList from './ProductList';

const App = () => {
  const products = [
    { id: 1, name: 'Product A', description: 'Description A', price: 10 },
    { id: 2, name: 'Product B', description: 'Description B', price: 20 },
    { id: 3, name: 'Product C', description: 'Description C', price: 30 },
  ];

  return (
    <div>
      <h1>Product List</h1>
      <ProductList products={products} />
    </div>
  );
};

export default App;

Now, when you run your React application, you should see a list of products with a "View Details" button next to each product. Clicking on this button will open a modal displaying the details of the selected product.

In this tutorial, we have created a modal in React.js using functional components and React hooks. This modal allows us to display detailed information about a product without cluttering the product list page. You can further customize the modal styling and content to fit your needs. Happy coding!