applied all suggested changes

reactplay · Jan 10, 2024 · 5b65e4d · 5b65e4d
1 parent 822f85f
commit 5b65e4d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 25 deletions.
diff --git a/src/plays/airbnb-experiences-clone/AirbnbExperiencesClone.jsx b/src/plays/airbnb-experiences-clone/AirbnbExperiencesClone.jsx
@@ -7,14 +7,12 @@ function AirbnbExperiencesClone(props) {
  // Your Code Start below.
 
  return (
- <>
- <div className="play-details">
- <PlayHeader play={props} />
- <div className="play-details-body">
- <App />
- </div>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ <App />
  </div>
- </>
+ </div>
  );
 }
 

diff --git a/src/plays/airbnb-experiences-clone/components/Card.jsx b/src/plays/airbnb-experiences-clone/components/Card.jsx
@@ -1,28 +1,43 @@
+import { useMemo } from 'react';
 import katieZaferesImg from '../assets/images/katie-zaferes.png';
 import weddingImage from '../assets/images/wedding-photography.png';
 import mountainBikeImage from '../assets/images/mountain-bike.png';
 import starImage from '../assets/images/star.png';
 
 export default function Card(props) {
- let badgeText;
- if (props.openSpots === 0) {
- badgeText = 'SOLD OUT';
- } else if (props.location === 'Online') {
- badgeText = 'ONLINE';
- }
+ const badgeText = useMemo(() => {
+  if (props.openSpots === 0) {
+  return 'SOLD OUT';
+  } else if (props.location === 'Online') {
+  return 'ONLINE';
+  }
 
- let cardImg;
- let altText;
- if (props.coverImg === 'katie-zaferes.png') {
- cardImg = katieZaferesImg;
- altText = 'Katie Zaferes';
- } else if (props.coverImg === 'wedding-photography.png') {
- cardImg = weddingImage;
- altText = 'Woman wearing a white gown';
- } else if (props.coverImg === 'mountain-bike.png') {
- cardImg = mountainBikeImage;
- altText = 'Mountain bike';
- }
+ return null;
+ }, [props.openSpots, props.location]);
+
+ const cardImg = useMemo(() => {
+ if (props.coverImg === 'katie-zaferes.png') {
+ return katieZaferesImg;
+ } else if (props.coverImg === 'wedding-photography.png') {
+ return weddingImage;
+ } else if (props.coverImg === 'mountain-bike.png') {
+ return mountainBikeImage;
+ }
+
+ return null;
+ }, [props.coverImg]);
+
+ const altText = useMemo(() => {
+ if (props.coverImg === 'katie-zaferes.png') {
+ return 'Katie Zaferes';
+ } else if (props.coverImg === 'wedding-photography.png') {
+ return 'Woman wearing a white gown';
+ } else if (props.coverImg === 'mountain-bike.png') {
+ return 'Mountain bike';
+ }
+
+ return null;
+ }, [props.coverImg]);
 
  return (
  <div className="card">