added callback to tabnav to handle clicking a tab

bottega-code-school · Jun 12, 2018 · ba3bd52 · ba3bd52
1 parent 1df73c9
commit ba3bd52
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -11,7 +11,7 @@ class Dashboard extends Component {
             tabs: [
                 {
                     title: 'Newsletter',
-                    active: false,
+                    active: true,
                     component: <h4>Hey There - Newsletter</h4>
                 },
                 {
@@ -23,10 +23,14 @@ class Dashboard extends Component {
         }
     }
 
+    handleTabChange = (title) => {
+        console.log('clicked on tab', title);
+    }
+
   render() {
     return (
         <div className='dashboard'>
-            <TabNav tabs={this.state.tabs}/>
+            <TabNav handleClick={(title) => this.handleTabChange(title)} tabs={this.state.tabs}/>
         </div>
     )
   }

diff --git a/src/components/tabnav.js b/src/components/tabnav.js
@@ -7,11 +7,23 @@ class TabNav extends Component {
             <div className='tab-nav__tabs'>
             {
                 this.props.tabs.map((tab, index) => {
-                    return <a className='tab-nav__tab'>{tab.title}</a>
+                    return <a key={index} onClick={() => this.props.handleClick(tab.title)} className='tab-nav__tab'>{tab.title}</a>
                 })
             }
             </div>
-            <div>requests or newsletters content goes here</div>
+
+            {
+                this.props.tabs.map((tab, index) => {
+                    if(tab.active) {
+                        return (
+                            <div key={index} className='tab-nav__component'>
+                                {tab.component}
+                            </div>
+                        )
+                    }
+                })
+            }
+
         </div>
     )
   }