显示带有从 react.js 中的表格元素带来的信息的弹出窗口

Question

I'm developing an app in React.JS and I have to display information that further details the selected element of a table.

I share an image as an explanation so that it can be understood or what I need to do.

How can I do it? I understand that you have to pass variables to the popup so that they are taken and displayed according to the selected element.

Answer 1

For this use case, create a local state in the component and update the details on click of the selected record and pass the state to the modal.

Here I created a selectedData state for populating the selected records and updating this state when onClick of more details in the table and also passing them as props to the modal so that it shows up in the UI.

Complete Code:-

import React, { useState } from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

const data = [
  {
    id: 1001,
    firstname: "Mark",
    lastname: "Otto",
    age: 34,
    location: "London",
    address: "10 Downing Street"
  },
  {
    id: 1002,
    firstname: "Jacob",
    lastname: "Jacob",
    age: 34,
    location: "India",
    address: "#110 broad Street"
  }
];

export default function App() {
  const [show, setShow] = useState(false);
  const [selectedData, setSelectedData] = useState({});
  const hanldeClick = (selectedRec) => {
    setSelectedData(selectedRec);
    setShow(true);
  };

  const hideModal = () => {
    setShow(false);
  };

  return (
    <div className="App">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Id</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Location</th>
            <th scope="col">Show More</th>
          </tr>
        </thead>
        <tbody>
          {data.map((v) => (
            <tr>
              <td>{v.id}</td>
              <td>{v.firstname}</td>
              <td>{v.lastname}</td>
              <td>@{v.location}</td>
              <td>
                <a href="#" onClick={() => hanldeClick(v)}>
                  More details
                </a>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {show && <Modal details={selectedData} handleClose={hideModal} />}
    </div>
  );
}

const Modal = ({ handleClose, details }) => {

  return (
    <div className="modal display-block">
      <section className="modal-main">
        <div className="App">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Id</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Age</th>
                <th scope="col">Location</th>
                <th scope="col">Address</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{details?.id}</td>
                <td>{details?.firstname}</td>
                <td>{details?.lastname}</td>
                <td>{details?.age}</td>
                <td>{details?.location}</td>
                <td>{details?.address}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <button onClick={handleClose}>close</button>
      </section>
    </div>
  );
};

Working Demo - https://codesandbox.io/s/awesome-lamarr-hy8hu?file=/src/App.js:0-2625

Hope you are looking for the same use case. Let me know if you are facing any issue.