Refactors restaurant in a list into its own component

suncoast-devs · Oct 14, 2020 · 111f27f · 111f27f
1 parent f91a8f1
commit 111f27f
Showing 1 changed file with 21 additions and 12 deletions.
diff --git a/ClientApp/src/pages/Restaurants.jsx b/ClientApp/src/pages/Restaurants.jsx
@@ -3,6 +3,23 @@ import avatar from '../images/avatar.png'
 import tacoTuesday from '../images/taco-tuesday.svg'
 import map from '../images/map.png'
 
+function SingleRestaurantFromList(props) {
+  return (
+    <li>
+      <h2>{props.restaurant.name}</h2>
+      <p>
+        <span
+          className="stars"
+          style={{ '--rating': 4.7 }}
+          aria-label="Star rating of this location is 4.7 out of 5."
+        ></span>
+        (2,188)
+      </p>
+      <address>{props.restaurant.address}</address>
+    </li>
+  )
+}
+
 export function Restaurants() {
   const [restaurants, setRestaurants] = useState([])
 
@@ -48,18 +65,10 @@ export function Restaurants() {
 
         <ul className="results">
           {restaurants.map((restaurant) => (
-            <li key={restaurant.id}>
-              <h2>{restaurant.name}</h2>
-              <p>
-                <span
-                  className="stars"
-                  style={{ '--rating': 4.7 }}
-                  aria-label="Star rating of this location is 4.7 out of 5."
-                ></span>
-                (2,188)
-              </p>
-              <address>{restaurant.address}</address>
-            </li>
+            <SingleRestaurantFromList
+              key={restaurant.id}
+              restaurant={restaurant}
+            />
           ))}
         </ul>
       </main>