🐛 - modal is popping up; buttons not working

The modal for New habit is working once again... however the Exit and Submit are not performing as intended. Some of the code that easily read state is no longer working. There is some logic for example that passes around boolean values to determine which buttons to show/hide. Why this was working I'm sure if it was correct or why now there's so much difficulty. Again I think it goes that to 'proper' state/prop passing. Just starting to get the gist of it but there's some sticking points still. I feel as though out dev build was throwing values around like crazy and it worked... now trying to go by best practices I'm stuck figuring our what's happening. It would explain to some degree how the Layout was working previously. I removed it thinking it was a useless wrapper... not I'm thinking it was what was responsible for passing things again.   chingu-voyages#94

client/src/components/Dashboard.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 
-//import NewHabit from './NewHabit';
+import NewHabit from './NewHabit';
 import CheckIn from './CheckIn';
 import CurrentHabit from './CurrentHabit';
 import Progress from './Progress';
@@ -14,16 +14,21 @@ class Dashboard extends Component {
         habitData: [],
         hamburgerOpen: false,
         checkIn: false,
-        habitExist: false,
+        habitExist: false
     };
 
 
+    handleCheckIn = () => {
+
+
+    }    
+
     //used componentDidUpdate due to async nature of firebase/props
     componentDidUpdate(prevProps) {
         if (this.props.email !== undefined && this.props.email !== prevProps.email) {
             // Do what you want with email
             const user = this.props.email
-            console.log("email is: " + user)
+            console.log("Dashboard - email is: " + user)
 
             axios.get('/api/habits/first-habit/' + user)
                 .then(res =>
@@ -76,6 +81,8 @@ class Dashboard extends Component {
 
         let checkInComp = null;
         let checkInButton = null;
+
+
         if (this.state.habitExist) {
             checkInComp = <CheckIn checkIn={this.state.checkIn}
                 habitId={this.state.habitData._id}
@@ -90,7 +97,10 @@ class Dashboard extends Component {
 
         return (
             <div>
-
+                <NewHabit email={this.props.email}
+                    handleNewHabitSubmit={this.handleNewHabitSubmit}
+                    newEntry={this.state.newEntry} />
+                {checkInComp}
                 <main>
                     <h2>Daily Dashboard</h2>
                     {newHabitButton}

client/src/components/NewHabit.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import axios from 'axios';
-
 import HabitSubmission from './HabitSubmission';
 
 class NewHabit extends Component {
@@ -18,11 +17,13 @@ class NewHabit extends Component {
     }
 
     componentDidMount() {
-        const user = this.props.data
-        this.setState({ name: user[0].email })
-        console.log(user[0].email)
+        if (this.props.email !== undefined && this.props.email) {
+            const user = this.props.email
+            console.log("NewHabit email is: " + user)
+        }
     }
 
+
     handleSubmit = (event) => {
         event.preventDefault();
         if (this.state.habit.length > 0 && this.state.length.length > 0 && this.state.intervals.length > 0 && this.state.intervals !== 'select'){
@@ -58,7 +59,6 @@ class NewHabit extends Component {
     }
 
     handleOkClick = () => {
-        // this.props.handleNewHabitData();
         this.handleSubmitButton();
         this.props.handleNewHabitSubmit(this.state.habitData);
         this.setState({habit: '', smart: [], length: '', intervals: ''})
@@ -70,6 +70,8 @@ class NewHabit extends Component {
     }
 
     render(){
+
+
         let lenError = null
         if (this.state.lengthValid === false) {
             lenError = <p className="error">Please enter a number for length</p>
@@ -83,34 +85,34 @@ class NewHabit extends Component {
             fieldErr = null
         }
 
-
         const showModal = this.props.newEntry ? "modal display-block" : "modal display-none";
 
         return (
+
             <div className={showModal}>
-            <div className="newHabit">
-                <form onSubmit={this.handleSubmit}>
-                    <label className="header">
-                    <h2>New Habit</h2>
-                    </label>
-                    <label>
-                        Habit:
+                <div className="newHabit">
+                    <form onSubmit={this.handleSubmit}>
+                        <label className="header">
+                            <h2>New Habit</h2>
+                        </label>
+                        <label>
+                            Habit:
                     </label>
-                        <input type='text' name='habit' placeholder="Please enter new habit to be tracked"value={this.state.habit} onChange={this.onChange} />
-                    <label>
-                        Smart Goals: (OPTIONAL)
+                        <input type='text' name='habit' placeholder="Please enter new habit to be tracked" value={this.state.habit} onChange={this.onChange} />
+                        <label>
+                            Smart Goals: (OPTIONAL)
                     </label>
-                        <input type='text' name='smart' placeholder="Please separate goals with commas" 
-                        value={this.state.smart} onChange={this.onChange} />
+                        <input type='text' name='smart' placeholder="Please separate goals with commas"
+                            value={this.state.smart} onChange={this.onChange} />
 
-                    <HabitSubmission handleOkClick={this.handleOkClick} submit={this.state.submit} />
+                        <HabitSubmission handleOkClick={this.handleOkClick} submit={this.state.submit} />
 
-                    <label>
-                        Length of Time to Track:
+                        <label>
+                            Length of Time to Track:
                     </label>
                         <input type='text' name='length' placeholder="Please enter time in months" value={this.state.length} onChange={this.onLengthChange} />
-                    <label>
-                        Daily Checkin Intervals:
+                        <label>
+                            Daily Checkin Intervals:
                     </label>
                         <select name='intervals' value={this.state.intervals} onChange={this.onChange}>
                             <option value="select">Select One Option Please</option>
@@ -120,16 +122,15 @@ class NewHabit extends Component {
                             <option value="biWeekly">Bi-Weekly</option>
                             <option value="monthly">Monthly</option>
                         </select>
-                    { lenError }
-                    { fieldErr }
-                    <div className="buttons">
-                        <button className="button" onClick={this.handleExitClick}>Exit</button>
-                        <input className="button" type="submit" value="Start Tracking" onClick={this.handleSubmitButton}/>
-                    </div>                   
-                </form>
+                        {lenError}
+                        {fieldErr}
+                        <div className="buttons">
+                            <button className="button" onClick={this.handleExitClick}>Exit</button>
+                            <input className="button" type="submit" value="Start Tracking" onClick={this.handleSubmitButton} />
+                        </div>
+                    </form>
+                </div>
             </div>
-            </div>
-
         )
     }
 }