Show the last user in the modal - reactjs

Question

I need help with this code. It is a website that shows users on the screen and the button on the right should open the user information details in a modal. I can't get the information of the user I click on, to appear in the modal. Show me the last one.
web photo
Foto of the website
Foto of the modal
And this is my code
import { Modal } from "antd";
import 'antd/dist/antd.css';
import { useEffect, useState } from "react"
import { userApi } from "../api/userApi";
import { Usuario } from "../interfaces/fetchAllUserResponse";
export const List = () => {
const [users, setUsers] = useState<Usuario[]>([]);
const [currentPage, setCurrentPage] = useState(0);
const [isModalOpen, setIsModalOpen] = useState(false);
useEffect(() => {
// call API
userApi.get<Usuario[]>('/default/techJobMission')
.then( resp => {
setUsers( resp.data );
})
.catch( console.log )
}, []);
const filteredUsers = (): Usuario[] => {
return users.slice(currentPage, currentPage + 6);
}
const nextUser = () => {
setCurrentPage( currentPage + 5 )
}
const prevUser = () => {
if( currentPage > 0 ){
setCurrentPage( currentPage - 5 )
};
}
const renderItem = ({ _id, firstName, lastName, ticket, present }: Usuario) => {
const openModal = () => {
setIsModalOpen(true)
}
const handleOk = () => {
setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
return (
<tr key={ _id }>
<td >
{( present ? <img className="ticket" src="icons/ticket-green.svg"/> : <img className="ticket" src="icons/ticket-red.svg"/>)}
</td>
<td className="user">
<p className="encabezado">{firstName } {lastName}</p>
{( present ? <p className="estado">Ha entrado</p> : <p className="estado">No ha entrado</p> )}
</td>
<td className="id-user">
<p className="encabezado2">ID</p>
<p className="estado">{_id}</p>
</td>
<td className="ticket-td">
<p className="encabezado2">Nº de ticket</p>
<p className="estado">{ticket + 1}</p>
</td>
<td>
<button onClick={openModal} className="btn-modal"> <img src="icons/menu-modal.svg"/> </button>
<Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} >
<p>{firstName}</p>
</Modal>
</td>
</tr>
)
}
return (
<>
<table className="table">
<tbody>
{
filteredUsers().map( renderItem )
}
</tbody>
</table>
<br />
<button onClick={ prevUser } className="paginacion">
<img src="icons/anterior.svg"/> Anterior
</button>
<button onClick={ nextUser } className="paginacion">
Siguiente <img src="icons/siguiente.svg"/>
</button>
</>
)
}

Answer 1

It's opening all of the modals.
You have multiple modals and one boolean value indicating if "the modal" is open or not. So either they're all open or they're all not open.
Instead of tracking a single boolean value, track something like an identifier for which modal to display. For example:
const [modalID, setModalID] = useState();
And:
const openModal = (id) => {
setModalID(id)
}
const handleCancel = () => {
setModalID(undefined);
};
Then pass that id to the function from your record:
onClick={() => openModal(_id)}
And use it to determine if the modal is open:
open={modalID === _id}