ReactJS sending data to modal from map items - arrays

Question

I have a map that render few items and i need when one element from map slected modal should load data about this selected items' id inside modal.
Like that:
<ListGroup>
{userinfo.map(item =>
(
<>
<ListGroup.Item key={item.id} onClick={handlePassInfoShow}>
{item.name}</ListGroup.Item>
</>
)
)}
</ListGroup>
<ModalPassInfo
modelClose={() => handlePassInfoClose()}
modelShow={showPaaInfo}
//id={item.id}
setshowPaaInfo={setshowPaaInfo}
/>
Here I am mapping through the user's array and adding a listgroup item to each of them with onClick modal. Now, whenever something is clicked inside map, the modal should be opened and read data about selected item.
And my modal like that.
const ModalPassInfo = ({modelShow, modelClose, id, showPaaInfo}) => {
const ref = React.createRef();
const [isError, setError] = useState(false);
const [isLoading, setLoading] = useState(true);
const [country_list, setCountries] = useState([]);
const [message, setMessage] = useState("");
const [data, setData] = useState({
//data about user
});
useEffect(() => {
loadNetwork();
}, []);
const loadNetwork = () => {
setLoading(true);
setError(false);
const selector = api.getItems("selector", {
tables: "country_list"
}).then(res => {
let response = res.data;
setCountries(response.country_list);
});
const data = api.getItems(`user-info/${id}`, {
}).then(res => {
let response = res.data;
setData(response);
});
Promise.all([selector, data]).then(res => {
console.log(res);
setError(false);
setLoading(false);
}).catch(e => {
console.log(e);
setMessage(e.toString());
setLoading(false);
setError(true);
});
};
const onRefresh = () => {
loadNetwork();
};
if (isError) {
return <ErrorMessage message={message} onRefresh={onRefresh}/>
}
if (isLoading) {
return <Loader/>
}
If I go to the page, the modal is loading immediately. And during onClick, only the last item id is retrieved.
And moy consts
const [showPaaInfo, setshowPaaInfo] = useState(false);
const handlePassInfoClose = () => setshowPaaInfo(false);
const handlePassInfoShow = () => {
setshowPaaInfo(true)
};
My question is. Any item on the map should send an id to the modal when the item is clicked. Where am I wrong?

Answer 1

Define one state
const [show, setShow] = React.useState(false);
function
const handlePassInfoShow = (data){
setShow(true);
console.log(data);
}
Change this to
<ListGroup>
{userinfo.map(item =>
(
<>
<ListGroup.Item key={item.id} onClick={()=>handlePassInfoShow(item)}>
{item.name}</ListGroup.Item>
</>
)
)}
</ListGroup>
{show && ( <ModalPassInfo
modelClose={() => handlePassInfoClose()}
modelShow={showPaaInfo}
//id={item.id}
setshowPaaInfo={setshowPaaInfo}
/>
)}