ReactJS sending data to modal from map items

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}
                         />
                         )}