How can I give different functionality to a button that was created in a map function in React?-CodePudding

I'm using .slice to display only one employee's information by clicking on a button, but since I'm mapping the button to each employee the functionality is exactly the same for each employee, and can't think of a way for each employee's button to perform .slice at the correct place.

      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>More Info</h2>
        <button onClick={closeModal}>close</button>
        {employees.slice(0, 1).map(info => (
          <>
          <p>{info.firstName}</p>
          <p>{info.lastName}</p>
          <p>{info.email}</p>
          <p>{info.phone}</p>
          <p>{info.address.streetAddress}, {info.address.city} {info.address.state} {info.address.zipCode}</p>
          <p>{info.bio}</p>
          </>
        ))}
      </Modal>

Each employee appears in a table and has this More Info button. There are 10 employees and each button opens the modal and lists the info for the employee at .slice(0,1), but I need each button to open at the correct place, (i.e. .slice(1, -8) will always display the info for the second employee)

                    <td>
                        <button onClick={() => setEmployeeToUpdate(id)}>Update</button>
                        <button onClick={() => moreInfo(id)}>More Info</button>
                        <button onClick={() => deleteEmployee(id)}>Delete</button>        
                    </td>

CodePudding user response：

Are you just trying to get the selected employee info into the modal? If so, you could track the selected employee in state and show the modal when one is selected. To close the modal simply clear the selection:

function EmployeeList ({employees}) {
   const [selectedEmployee, setSelectedEmployee] = useState();

   return (
     <>
        <ul>
          { employees.map(e => (
              <li key={e.id} onClick={() => setSelectedEmployee(e)}>
                {e.firstName}
              <li>
            )
          )}
        </ul>
        <Modal isOpen={selectedEmployee}>
          <button onClick={() => setSelectedEmployee(null)}>close</button>
          <p>{selectedEmployee?.firstName}</p>
          <p>{selectedEmployee?.lastName}</p>
          <p>{selectedEmployee?.email}</p>
        </Modal>
     </>
   )
}

CodePudding user response：

@Ray gave a good answer for using state to share the data.

I would aim to place the map somewhere that allows using the data in both places rather than storing a copy in state.

employees.map(employee => <>
  <td>
      <button onClick={() => setEmployeeToUpdate(employee.id)}>Update</button>
      <button onClick={() => showModel()}>More Info</button>
      <button onClick={() => deleteEmployee(employee.id)}>Delete</button>        
  </td>
  <InfoModel info={employee}>
  </>
})