Axios call made before modal box opens - reactjs

Question

I'm using bootstrap to open a modal. Previously I was trying to use a boolean to show/ close the modal but couldn't get it to work. Here is athe StackOverflow post where I was trying to get some help:
(How to open Bootstrap Modal from a button click in React)
The code below is making an AJAX request before a user has clicked the button to open the modal to present the user with some data.
This button is in a main page:
<td><button type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" onClick={() => rowEvents(id)}>Compare</button></td>
I include this component in the main page which in effect is then making the axios request:
<ComparisonModal previousWon={previousWon} currentWon={currentWon} />
useEffect(() => {
async function fetchData() {
const content = await client.get('1');
}
fetchData();
}, []);
I'm quite new to React, is there a better way to do this so that the Axios call is not made until a user clicks on the button to show the modal please?

Answer 1

Well, you have multiple questions at the same time, I just made this code sandbox as an example: https://codesandbox.io/s/relaxed-benji-8k0fr
Answering your questions:
Yes, you can show modal with a boolean. Basically would be like {booleanCondition && <MyModal />} (It's included in the code sandbox
Yes, you can do the axios request before when clicking the button. In the example we define a function: handleClick and on handleClick we do 2 things, getData which is a mocked request which last 3 seconds and setShowModal to be able to see the modal.
The result would be:
export default function App() {
const [showModal, setShowModal] = React.useState(false);
const [data, setData] = React.useState({});
const getData = async (id) => {
await wait(3000);
setData({ loaded: id });
};
const handleClick = (id) => {
setData({});
setShowModal(true);
getData(1);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={() => handleClick(1)}>Show Modal with Id 1</button>
<button onClick={() => handleClick(2)}>Show Modal with Id 2</button>
{showModal && <Modal data={data} onClose={() => setShowModal(false)} />}
</div>
);
}

Answer 2

I would try set a id to the button as it is a button on a table.
<td><button id="1" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" onClick={() => fetchData(id)}>Compare</button></td>
const fetchData = async (id) => {
try {
const content = await client.get(id);
} catch (err) {
console.log(err);
}
}