ReactJs : How to display a specific data from an array with a click

I got an Array with a list of objects , each object contains an ID/title / job description/salary , i mapped through the array to only display the title and next to it a button of job details on it , with a click of the button it suppose to display an overlay with that specific job details , would any body give a clue on how i kae this work using useState and map.

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).",
    ],
  },
  {
    id: 3,
    title: "Receptionist",
    salary: "1200$",
    jobDescription: [
      "Greet and welcome guests as soon as they arrive at the office",
      "Direct visitors to the appropriate person and office",
      "Answer, screen and forward incoming phone calls",
      "Ensure reception area is tidy and presentable, with all necessary stationery and material (e.g. pens, forms and brochures)",
      "Provide basic and accurate information in-person and via phone/email",
      "Receive, sort and distribute daily mail/deliveries",
      "Maintain office security by following safety procedures and controlling access via the reception desk (monitor logbook, issue visitor badges)",
      "Order front office supplies and keep inventory of stock",
      "Update calendars and schedule meetings",
    ],
  },
  {
    id: 4,
    title: "Public Relationship Manager",
    salary: "5000$",
    jobDescription: [
      "Plan, implement and manage public relations programs",
      "Plan and budget for PR events, programs and initiatives",
      "Help in designing and reviewing a variety of promotional and marketing materials",
      "Design and review the online content in media announcements and media kits",
      "Monitor corporate image frequently and ensure it is in compliance with company brand",
      "Check and manage content produced for website and social media channels",
      "Develop and implement PR policies and procedures",
      "Determine KPIs for PR departmen",
      "Measure and provide reports on each PR campaign ",
      "Build long-term relationships with all relevant stakeholders, such as local government, media people, politicians, etc.",
    ],
  },
];
const CareerOverlay = (props) => {
  return (
    <div className={classes.careerBox}>
      {CareerList.map((job, index) => {
        return (
          <div className={classes.jobItem} key={index}>
            <h2>{job.title}</h2>
            <ButtonMedium>Job Detail</ButtonMedium>
          </div>
        );
      })}
    </div>
  );
};

Hi @freesudani.
Since you know when looping what element in the array you are looping for, you can simply have an onClick event that is bounded to the id.

Something like:

// the handler
const showDescription = id => {
 console.log(`we need to show job description of the job with id ${id}`
}

// while mapping.
<button onCLick={() => showDescription(job.id} />

Does it make sense? :sparkles:
I can provide a more concrete example if you need one :slight_smile:

My issue is that i wanted to show the job details as a modal , so i needed the onClick prop in the button to control the useState which will be resposible to render the modal , in that case how can i control the id that goes into the component