narratives: Refactor next button to new component

Create a new class component for the next button in mobile narratives.
nextstrain · Jan 29, 2020 · 01cc998 · 01cc998
1 parent 18a7f78
commit 01cc998
Showing 1 changed file with 10 additions and 4 deletions.
diff --git 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>
       </>
     );
   }