Forwarded props to handle closing the cart upon a click on the backdrop

commit-kyle · May 11, 2021 · b4e7d25 · b4e7d25
1 parent e5c1a6f
commit b4e7d25
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/specialtea/src/components/Cart/Cart.js b/specialtea/src/components/Cart/Cart.js
@@ -38,7 +38,7 @@ const Cart = props => {
 	);
 
 	return (
-		<Modal>
+		<Modal onClick={props.onHideCart}>
 			{cartItems}
 			<div className={classes.total}>
 				<span>Total Amount</span>

diff --git a/specialtea/src/components/UI/Modal/Backdrop/Backdrop.js b/specialtea/src/components/UI/Modal/Backdrop/Backdrop.js
@@ -1,7 +1,7 @@
 import classes from './Backdrop.module.css';
 
-const Backdrop = () => {
-	return <div className={classes.backdrop}></div>;
+const Backdrop = props => {
+	return <div className={classes.backdrop} onClick={props.onClick}></div>;
 };
 
 export default Backdrop;
diff --git a/specialtea/src/components/UI/Modal/Modal.js b/specialtea/src/components/UI/Modal/Modal.js
@@ -9,7 +9,7 @@ const Modal = props => {
 
 	return (
 		<Fragment>
-			{ReactDOM.createPortal(<Backdrop />, portalElement)}
+			{ReactDOM.createPortal(<Backdrop onClick={props.onClick}/>, portalElement)}
 			{ReactDOM.createPortal(
 				<Overlay>{props.children}</Overlay>,
 				portalElement