How to dynamically close TEMPORARY MUI DRAWER on event completion in React - reactjs

Question

I'm using MUI Drawer in my project and i'd like to close the drawer when a user initiated event completed, my problem is the component at which the event was initiated and the compenent that render the Drawer are not the same.
Below is my ButtomNavigation.js that rendered the drawer
const ButtomNavigation = (props) => {
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const toggleDrawer = (anchor, open) => (event) => {
if (
event &&
event.type === 'keydown' &&
(event.key === 'Tab' || event.key === 'Shift')
) {
return;
}
setState({ ...state, [anchor]: open });
};
return (
<>
<div className='d-flex justify-content-between item-bottom-nav'>
<div className='d-flex justify-content-end cart-and-buy-now'>
<button id="addCart" onClick={toggleDrawer('bottom', true)}>Add to cart</button>
<button id="buyNow" onClick={toggleDrawer('bottom', true)}>Buy now</button>
</div>
</div>
<div >
{['bottom'].map((anchor) => (
<React.Fragment key={anchor}>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
PaperProps={{
sx:{height: 'calc(100% - 60px)', top: 60,borderTopLeftRadius:'10px',borderTopRightRadius:'10px'}
}}
>
{props.Data !=null &&
<>
<ItemModule Data={props.Data}/>
</>
}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
</>
);
};
export default ButtomNavigation;
now in my ItemModule.js component ii have a function that make a remote call to add item to cart and on success i want to close the drawer
const addToCart = async (cartItem) => {
try {
const response = await axiosPrivate.post("/cart",
JSON.stringify({ cartItem }), {
signal: controller.signal
});
console.log(response?.data);
//Here i want to close the Drawer after the response has being received
}catch(err){
handle error
}

Answer 1

The Drawer has an "open" property, that you're using. Move this property in a provider (in a state variable). Wrap both components in this provider, and give them access to the "open" variable, and the setOpen to the one that need it, in your case the component having "addToCart". Call setOpen when the event occured.