render dynamically modal based on row onclick - ReactJS - css

Question

working on a project for a undisclosed in which data on patients gets pulled from their api and gets loaded as modal on the page . When you click on a modal more info of the threat gets pulled up as a modal. The goal here is for them to render when someone clicks for it based on div.
how do I proprly send the data from api to modal component on each click ?
div table-alike on click
import React, {useState,useEffect} from 'react';
const keys = Object.keys(arr[0]);
// const handleOnClick = param => {
// console.log('do something: ', param);
// }
export default function Demo() {
const [isModalOpen, setModalIsOpen] = useState(false);
const [users, setUsers] = useState([]);
const toggleModal = () => {
setModalIsOpen(!isModalOpen);
};
const handleOnClick = () => {
toggleModal()
};
useEffect(() => {
const fetchUsers = async () => {
try {
const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;
setUsers(data);
} catch (err) {
console.error("failed", err);
}
setModalIsOpen(false);
};
fetchUsers();
}, []);
return (
<div className="container">
<>
{keys.map((key) => (
<div className="col" key={key}>
<div className="row">{key}</div>
{arr[0][key].map((item) => (
<div className="row" key={item.technique_id} onClick={() => handleOnClick(item)}>{item.technique}</div>
))}
</div>
))}
</>
{isModalOpen && <Modal onRequestClose={handleOnClick} data={users}/>}
</div>
);
}
modal
import React, { useEffect } from "react";
const Modal = ({ onRequestClose, data }) => {
// Use useEffect to add an event listener to the document
useEffect(() => {
function onKeyDown(event) {
if (event.keyCode === 27) {
// Close the modal when the Escape key is pressed
onRequestClose();
}
}
// Prevent scolling
document.body.style.overflow = "hidden";
document.addEventListener("keydown", onKeyDown);
// Clear things up when unmounting this component
return () => {
document.body.style.overflow = "visible";
document.removeEventListener("keydown", onKeyDown);
};
});
return (
<div className="modal__backdrop">
<div className="modal__container">
<div className="modal-header">
<div className="modal-close" onClick={onRequestClose}>
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
<div className="job-title-wrapper">
<div className="job-card-title">{data}</div>
</div>
</div>
</div>
);
};
export default Modal;

Answer 1

If I understand this correctly, you want to make a particular API call and set it's data into the modal when the user clicks on a row, correct?
What you are currently doing through your useEffect is simply always fetching the user data every time something in your component updates, which is probably not what you want based off of your description. So you can probably remove that block completely.
Instead, you want that API called to be made whenever you click on the row, so it would seem that the more appropriate place to do so would be on your handleOnClick function. It should look something like this:
const handleOnClick = async () => {
try {
const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;
setUsers(data);
// Now that the data has been fetched, open the modal
setModalIsOpen(true);
} catch (err) {
console.error("failed", err);
}
};
Like this, the data should be all set in your user state by the time the modal is opened. With these changes, your Demo component should look something like this:
export default function Demo () {
const [isModalOpen, setModalIsOpen] = useState(false);
const [users, setUsers] = useState([]);
const handleOnClick = async () => {
try {
const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;
setUsers(data);
// Now that the data has been fetched, open the modal
setModalIsOpen(true);
} catch (err) {
console.error("failed", err);
}
};
return (
<div className="container">
<>
{keys.map((key) => (
<div className="col" key={key}>
<div className="row">{key}</div>
{arr[0][key].map((item) => (
<div className="row" key={item.technique_id} onClick={() => handleOnClick(item)}>{item.technique}</div>
))}
</div>
))}
</>
{isModalOpen && <Modal onRequestClose={() => setModalIsOpen(false)} data={users}/>}
</div>
);
}