I am looking to simultaneously execute two functions handleClose and saveData within the onClick method.
The specific location where I want this execution to happen:
<Button variant="contained" onClick={saveData}>
Save
</Button>
Complete code snippet:
import { useEffect } from "react";
import * as React from "react";
import Table from "@mui/material/Table";
// more imports ...
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
border: "2px solid #000",
boxShadow: 24,
p: 4,
};
const Home = () => {
// component state variables declaration ...
const saveData = () => {
fetch("https://apiendpoint.com/data", {
method: "POST",
body: JSON.stringify(formData),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => {
console.log(json, "Save Data");
handleClose();
});
};
useEffect(() => {
setLoader(true);
fetch("https://apiendpoint.com/data")
.then((res) => res.json())
.then(
(result) => {
if (result) {
setData(result);
setLoader(false);
}
},
(error) => {
console.log(error);
}
);
}, []);
return (
<div>
<Button variant="contained" onClick={handleOpen}>
Add
</Button>
<br />
<br />
{loader ? (
<LinearProgress />
) : (
<TableContainer component={Paper}>
// table structure markup ...
</TableContainer>
)}
<div>
<Modal>
// modal content markup ...
</Modal>
</div>
</div>
);
};
export default Home;