Estoy usando .slice para mostrar solo la información de un empleado haciendo clic en un botón, pero dado que estoy asignando el botón a cada empleado, la funcionalidad es exactamente la misma para cada empleado y no puedo pensar en una manera para cada empleado. botón para realizar .slice en el lugar correcto.
<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>Cada empleado aparece en una tabla y tiene este botón Más información. Hay 10 empleados y cada botón abre el modal y muestra la información del empleado en .slice(0,1), pero necesito que cada botón se abra en el lugar correcto (es decir, .slice(1, -8) siempre mostrar la información para el segundo empleado)
<td> <button onClick={() => setEmployeeToUpdate(id)}>Update</button> <button onClick={() => moreInfo(id)}>More Info</button> <button onClick={() => deleteEmployee(id)}>Delete</button> </td>¿Está tratando de obtener la información del empleado seleccionado en el modal? Si es así, puede rastrear al empleado seleccionado en el estado y mostrar el modal cuando se selecciona uno. Para cerrar el modal, simplemente borre la selección:
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> </> ) }@Ray dio una buena respuesta para usar el estado para compartir los datos.
Mi objetivo sería colocar el mapa en algún lugar que permita usar los datos en ambos lugares en lugar de almacenar una copia en el estado.
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}> </> })