completed Lab-React-Props

src/App.js

@@ -1,6 +1,9 @@
 import React from "react";
 import TopBar from "./Components/TopBar";
 import "./App.css";
+import DonationForm from "./Components/DonationForm";
+import Progress from "./Components/Progress";
+import RecentDonations from "./Components/RecentDonations";
 
 const targetAmount = 1000;
 const donations = [
@@ -41,10 +44,10 @@ function App() {
     <>
       <TopBar />
       <main className="container">
-        <section className="sidebar">{/* Recent Donations */}</section>
+        <section className="sidebar">{<RecentDonations donations={donations}/>}</section>
         <section className="">
-          {/* Progress */}
-          {/* Donation Form */}
+          <Progress donations={donations} targetAmount={targetAmount}/>
+          <DonationForm donations={donations}/>
         </section>
       </main>
     </>

src/Components/DonationForm.js

@@ -1,3 +1,34 @@
-export default function DonationForm() {
-  return null;
+
+export default function DonationForm(props) {
+
+  return (
+
+    <section className="donation">
+  <h3>You could be donation <span class="secondary">#{props.donations.length+1}!</span></h3>
+  <form>
+    <label htmlFor="name"
+      >Name<input
+        id="name"
+        name="name"
+        type="text"
+        placeholder="Your name..." /></label>
+        <label htmlFor="caption"
+      >Caption<input
+        id="caption"
+        name="caption"
+        type="text"
+        placeholder="Add a brief message..." /></label>
+        <label htmlFor="amount"
+      >Amount<input
+        id="amount"
+        name="amount"
+        type="number"
+        placeholder="0" /></label>
+        <button>Donate!</button>
+  </form>
+</section>
+
+
+)
 }
+

src/Components/Progress.js

@@ -1,3 +1,19 @@
-export default function Progress() {
-  return null;
+export default function Progress(props) {
+  let amount = 0
+  // let donations= props.donations
+
+  // for (let i=0; i< props.donations.length; i++) {
+  //   amount += props.donations[i].amount
+  // }
+  props.donations.forEach(donation => {
+    amount += donation.amount
+  })
+  return (
+    <section className="progress">
+  <h2>
+    Raised <span className="secondary">${amount}</span> of <span className="secondary">${props.targetAmount}</span>
+  </h2>
+</section>
+
+  )
 }

src/Components/RecentDonations.js

@@ -1,3 +1,15 @@
-export default function RecentDonations() {
-  return null;
+export default function RecentDonations(props) {
+
+  const listItem = props.donations.map(donation =>{
+    return(
+      <li><span>{donation.name} ${donation.amount}</span>{donation.caption}.</li>
+    )
+  })
+  return (
+  <section>
+    <h2>Recent Donations</h2>
+    <ul>
+     {listItem}
+    </ul>
+  </section>)
 }

src/Components/TopBar.js

@@ -6,5 +6,6 @@ export default function TopBar() {
       </h1>
       <p>Help me go on a vacation to a beach somewhere!</p>
     </header>
+
   );
 }