From 01cc998c5236ed88e6e4d210e2b0db78ca61686e Mon Sep 17 00:00:00 2001
From: Kairsten Fay <kairsten.fay@gmail.com>
Date: Wed, 29 Jan 2020 14:11:07 -0800
Subject: [PATCH] narratives: Refactor next button to new component

Create a new class component for the next button in mobile narratives.
---
 src/components/narrative/MobileNarrativeDisplay.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/narrative/MobileNarrativeDisplay.js b/src/components/narrative/MobileNarrativeDisplay.js
index 215685807..2c5933d03 100644
--- a/src/components/narrative/MobileNarrativeDisplay.js
+++ b/src/components/narrative/MobileNarrativeDisplay.js
@@ -153,13 +153,19 @@ class MobileNarrativeDisplay extends React.Component {
           {this.renderVizCards(this.state.contentHeight)}
           {this.renderMainMarkdown()}
         </MobileContentContainer>
-        <MobileBannerBottom height={bannerHeight} onClick={this.goToNextPage}>
+        <this.NextButton>
           Next
-        </MobileBannerBottom>
+        </this.NextButton>
       </>
     );
   }
 
+  NextButton = (props) => (
+    <MobileBannerBottom height={this.state.bannerHeight} onClick={this.goToNextPage}>
+      {props.children}
+    </MobileBannerBottom>
+  )
+
   render() {
 
     if (this.state.showingEndOfNarrativePage) {
@@ -180,9 +186,9 @@ class MobileNarrativeDisplay extends React.Component {
           {this.renderVizCards(this.state.contentHeight)}
           {this.renderMainMarkdown()}
         </MobileContentContainer>
-        <MobileBannerBottom height={bannerHeight} onClick={this.goToNextPage}>
+        <this.NextButton>
           Next
-        </MobileBannerBottom>
+        </this.NextButton>
       </>
     );
   }