Heidi newboard-newcardform

src/App.js

@@ -26,17 +26,21 @@ function App() {
       <main>
       <section className='new-board-form__container'>
         <h2>Create a New Board</h2>
-        {/* < NewBoardForm /> */}
+        {/* < NewBoardForm 
+          addBoardCallBack={ newBoardData }
+        /> */}
       </section>
       <section className='boards__container'>
-        <h2>Choose A Board</h2> 
-        < BoardList 
-        boardsData= { boardsData }
-        />
+        <h2>Choose A Board</h2>
+        <div>
+          < BoardList 
+          boardsData= { boardsData }
+          />
+        </div>
       </section>
-      {/* <section> 
+      <section> 
         < CardList />
-      </section> */}
+      </section>
       </main>
     </div>
 

src/components/BoardList.js

@@ -12,7 +12,7 @@ const BoardList = (props) => {
         )
     })  
 
-    return <section>{ boardList }</section>
+    return <div>{ boardList }</div>
 }
 
 export default BoardList;

src/components/NewBoardForm.js

@@ -1,7 +1,62 @@
+import { useState } from 'react';
 import React from 'react';
 
-const NewBoardForm = () => {
-    return []
-}
+const NewBoardForm = (props) => {
+    const [boardForm, setBoardForm] = useState({
+        title: '',
+        owner: ''  
+    });
+
+    const onTitleChange = (event) => {
+        setBoardForm({
+            ...boardForm,
+            title: event.target.value
+        })
+    }
+
+    const onOwnerChange = (event) => {
+        setBoardForm({
+            ...boardForm,
+            owner: event.target.value
+        })
+    }
+
+    const onFormSubmit = (event) => {
+        event.preventDefault();
+
+        props.addBoardCallback({
+            titleData: boardForm.title,
+            ownerData: boardForm.owner
+        })
+
+        setBoardForm({
+            title: '',
+            owner: '' 
+        })
+    }
+
+    return (
+        <form onSubmit={onFormSubmit}>
+            <div>
+                <label>Title</label> 
+                <input
+                    value={boardForm.title}
+                    onChange={ onTitleChange }
+                />
+            </div>
+            <div>
+                <label>Owner</label> 
+                <input
+                    value={boardForm.owner}
+                    onChange={ onOwnerChange }
+                />
+            </div>
+            <input 
+                type="submit"
+                value="Submit The Board"
+            />
+        </form>
+    );
+};
 
 export default NewBoardForm;

src/components/NewCardForm.js

@@ -1,7 +1,45 @@
 import React from 'react';
+import { useState } from 'react';
 
-const NewCardForm = () => {
-    return []
-}
+const NewCardForm = (props) => {
+    const [cardForm, setCardForm] = useState({
+        message: ''
+    });
+
+    const onMessageChange = (event) => {
+        setCardForm({
+            ...cardForm,
+            message: event.target.value
+        })
+    }
+
+    const onFormSubmit = (event) => {
+        event.preventDefault();
+
+        props.addCardCallback({
+            message: cardForm.message
+        })
+
+        setCardForm({
+            message:''
+        })
+    }
+
+    return (
+        <form onSubmit={onFormSubmit}>
+            <div>
+                <label>Message</label> 
+                <input
+                    value={cardForm.message}
+                    onChange={ onMessageChange }
+                />
+            </div>
+            <input 
+                type="submit"
+                value="Submit The Message"
+            />
+        </form>
+    );
+};
 
 export default NewCardForm;