UPD: make invoiceDetail as a self-contained compoient

src/components/mainPage/invoice.jsx

@@ -1,18 +1,22 @@
 import React from "react";
 
-const Invoice = (props) => {
+// re-arrange to make invoice detail a self-contained element
+const Invoice = ( {invoiceDetails} ) => {
+    let addressInfo = invoiceDetails.purchase_units[0].shipping.address;
+    let address = `${addressInfo.address_line_1} ${addressInfo.admin_area_2}, ${addressInfo.admin_area_1} ${addressInfo.postal_code}`;
 
     return (
         <div className="container">
-            Date Purchased: {props.date}
+            Date Purchased: {invoiceDetails.create_time}
             <br />
-            Item: {props.itemName}
+            Item: {invoiceDetails.purchase_units[0].description}
             <br />
-            Amount Paid: ${props.itemValue}
+            Amount Paid: ${invoiceDetails.purchase_units[0].amount.value}
             <br />
-            Ship to: {props.buyerName}
+            Ship to: {invoiceDetails.purchase_units[0].shipping.name.full_name}
             <br />
-            Shipping address: {props.streetAddr} {props.city}, {props.state} {props.postalCode}
+            {/* Shipping address: {streetAddr} {city}, {state} {postalCode} */}
+            Shpping address: {address}
         </div>
     );
 }

src/components/mainPage/landing.jsx

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import "./home.css";
 import { PayPal, Purchase, ShowCase, Home } from '.';
 
-const details = () => {
+// component
+const Details = () => {
   return (
     <>
       <ShowCase />
@@ -11,12 +12,13 @@ const details = () => {
     </>
   );
 };
+
 const Landing = () => {
   const [showDetails, setShowDetails] = useState(false);
 
   return (
     <>
-      {showDetails ? details() : <Home goNext={() => setShowDetails(true)} />}
+      {showDetails ? <Details /> : <Home goNext={() => setShowDetails(true)} />}
     </>
   );
 };

src/components/mainPage/paypal.jsx

@@ -48,18 +48,8 @@ const PayPal = () => {
           </div>
         </PayPalScriptProvider>
       </div>
-      {showInvoice && 
+      {/* This is a nice touch */}
-        <Invoice 
+      {showInvoice && <Invoice invoiceDetails={invoiceDetails} />}
-          date={invoiceDetails.create_time}
-          itemName={invoiceDetails.purchase_units[0].description}
-          itemValue={invoiceDetails.purchase_units[0].amount.value}
-          buyerName={invoiceDetails.purchase_units[0].shipping.name.full_name}
-          streetAddr={invoiceDetails.purchase_units[0].shipping.address.address_line_1}
-          city={invoiceDetails.purchase_units[0].shipping.address.admin_area_2}
-          state={invoiceDetails.purchase_units[0].shipping.address.admin_area_1}
-          postalCode={invoiceDetails.purchase_units[0].shipping.address.postal_code}
-        />
-      }
     </>
   );
 };