ReactJs：如何通过单击从对象数组中显示 object 的特定数据

Question

I got an Array with a list of objects, each object contains an ID/title / job description/salary, i saved it in a seperate file as below

  export const CareerList = [
  {
    id: 1,
    title: "Junior Accountant",
    salary: "1500$",
    jobDescription: [
      "Maintains financial records for subsidiary companies by analyzing balance sheets and general ledger accounts",
      "Reconciles general and subsidiary bank accounts by gathering and balancing information",
      "Provides financial status information by preparing special reports; completing special projects",
      "Corrects errors by posting adjusting journal entries",
      "Maintains general ledger accounts by reconciling accounts receivable detail and control accounts; adjusting entries for amortizations prepaids; analyzing and reconciling retainage and accounts payable ledgers; preparing fixed asset depreciation and accruals",
      "Secures financial information by completing database backups; keeping information confidential",
      "Maintains accounting controls by following policies and procedures; complying with federal, state, and local financial legal requirements",
      "Updates job knowledge by participating in educational opportunities; reading professional publications",
      "Accomplishes accounting and organization mission by completing related results as needed",
    ],
  },
  {
    id: 2,
    title: "Research Analyst",
    salary: "3500$",
    jobDescription: [
      "Support the Director of Research & Impact and the Research Manager in implementing all phases of ANDE research projects",
      "Design and administer surveys and conduct secondary data collection from online sources to aggregate data related to global SGB support.",
      "Clean and analyze data to identify key trends, and develop reports communicating these insights to practitioners",
      "Track new research developments related to SGBs and collect and synthesize this research for ANDE members.",
      "Provide support in identifying and selecting consultants and interns to support research activities and coordinate with these consultants and interns to carry out research.",
      "Manage the content of ANDE’s various online research portals, such as www.galidata.org, http://ecosystems.andeglobal.org, and www.andeglobal.org/knowledge-hub.",
      "Manage administrative functions related to project funding (e.g. tracking expenses).",
    ],
  },

im trying to creat two modals, one modal which only display the job titles with the buttong "job details" next to it, and if i clicked on a particular job button, the list modal show hide and another modal with that specific job details should show, any suggestion how it can be done?

    import { CareerList } from "../data/Careers";
import ButtonMedium from "../UI/ButtonMedium";
import JobDetails from "./JobDetails";

const Backdrop = (props) => {
  return <div className={classes.backdrop} onClick={props.onHide}></div>;
};

const CareerOverlay = () => {
  const [showJobDetails, setShowJobDetails] = useState(false);

  const displayJobDetails = () => {
    setShowJobDetails(true);
  };

  return (
    <>
      <div className={classes.careerBox}>
        {CareerList.map((job, index) => {
          return (
            <div className={classes.jobItem} key={index}>
              <h2>{job.title}</h2>
              <ButtonMedium onClick={displayJobDetails}>
                Job Detail
              </ButtonMedium>
              {showJobDetails && (
                <JobDetails careerList={CareerList} id={job.id} />
              )}
            </div>
          );
        })}
      </div>
    </>
  );
};








const CareerOpportunities = (props) => {
  return (
    <>
      {reactDom.createPortal(
        <Backdrop onHide={props.onHide} />,
        document.getElementById("backdrop")
      )}
      {reactDom.createPortal(
        <CareerOverlay onShow={props.onShow} />,
        document.getElementById("career")
      )}
    </>
  );
};

export default CareerOpportunities;

import React from "react";
import classes from "./JobDetails.module.css";

const JobDetails = (props) => {
  const particularJob = props.careerList.find((job) => job.is === props.id);

  return (
    <div className={classes.jobBox}>
      <h1>{particularJob.title}</h1>
    </div>
  );
};

export default JobDetails;

Answer 1

Although the other answer seems alright, I'd also advise you to use portals for modals in React, and by that way you won't be bothered by stacking order when you're styling both modals. Read more about portals here: https://reactjs.org/docs/portals.html

Answer 2

You can split each item using new child component. So each item can manage modal state individually.

const CareerListItem = (props) => {
  const [showJobDetails, setShowJobDetails] = useState(false);

  const displayJobDetails = () => {
    setShowJobDetails(true);
  };

  return (
    <div className={classes.jobItem} key={index}>
      <h2>{job.title}</h2>
      <ButtonMedium onClick={displayJobDetails}>
        Job Detail
      </ButtonMedium>
      {showJobDetails && (
        <JobDetails job={props.job} />
      )}
    </div>
  )
}

const CareerOverlay = () => {
  return (
    <>
      <div className={classes.careerBox}>
        {CareerList.map((job, index) => {
          return (
            <CareerListItem job={job} />
          )
        })}
      </div>
    </>
  );
};
...
const JobDetails = (props) => {
  return (
    <div className={classes.jobBox}>
      <h1>{props.job.title}</h1>
      <div>details here...</div>
    </div>
  );
};