/Javascript/React/Show modal by using id in list react

Show modal by using id in list react

import React, { useState } from "react";

const productData = [
  { id: 1, label: "product1", description: "description1" },
  { id: 2, label: "product2", description: "description2" },
  { id: 3, label: "product3", description: "description3" },
  { id: 4, label: "product4", description: "description4" },
  { id: 5, label: "product5", description: "description5" },
  { id: 6, label: "product6", description: "description6" },
  { id: 7, label: "product7", description: "description7" },
];

const Products = () => {
  const [showModal, setShowModal] = useState(false);
  const [activeObject, setActiveObject] = useState(null);

  function getClass(index) {
    return index === activeObject?.id ? "active" : "inactive";
  }

  // here className can not be "inactive" since Modal always shows activeObject
  const Modal = ({ object: { label, description } }) => (
    <div id="productModal" className="active">
      This is modal
      <h2>{label}</h2>
      <span className="description">{description}</span>
      <button onClick={() => setShowModal(false)}>Close me</button>
    </div>
  );

  return (
    <>
      <ul className="list-menu">
        {productData.map(({ id, label, description }) => (
          <li
            key={id}
            onClick={() => {
              setActiveObject({ id, label, description });
              setShowModal(true);
            }}
            className={getClass(id)}
          >
            <h2>{label}</h2>
          </li>
        ))}
      </ul>
      {showModal ? <Modal object={activeObject} /> : null}
    </>
  );
};

export default Products;

Source: stackoverflow.com

Similar codes

0 vote137 views1 answer
React looping hooks to display in other hook
Javascript React
0 vote90 views1 answer
'{ state: any; dispatch: React.Dispatch<{ type: string; payload: any; }>; }' is not assignable to type 'Store'
Javascript React
5 votes129 views4 answers
How to use useref hook in react
Javascript React
0 vote136 views1 answer
Generate ios build react native
Javascript React
8 votes139 views4 answers
React multiple classnames
Javascript React
0 vote193 views2 answers
React native maximum update depth exceeded
Javascript React
0 vote217 views1 answer
React native create text file
Javascript React
0 vote140 views1 answer
Get all database react native
Javascript React
8 votes144 views3 answers
Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Javascript React
0 vote154 views1 answer
Add Navbar to React Redux CRUD App
Javascript React