Use getters to pass in elements directly instead of functions that return elements

ui/src/alerts/containers/AlertsApp.tsx

@@ -111,7 +111,7 @@ class AlertsApp extends PureComponent<Props, State> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {timeRange} = this.state
 
     return (

ui/src/dashboards/components/DashboardHeader.tsx

@@ -59,7 +59,7 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
-  private renderPageTitle = (): JSX.Element => {
+  private get renderPageTitle(): JSX.Element {
     return (
       <>
         {this.dashboardSwitcher}
@@ -68,7 +68,7 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {
       handleChooseAutoRefresh,
       onManualRefresh,

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -186,7 +186,7 @@ export class DataExplorer extends PureComponent<Props, State> {
     return buildRawText(this.activeQuery, timeRange)
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {
       timeRange,
       autoRefresh,

ui/src/flux/components/FluxHeader.tsx

@@ -27,7 +27,7 @@ class FluxHeader extends PureComponent<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     return (
       <button onClick={this.overlay} className="btn btn-sm btn-default">
         Edit Connection

ui/src/kapacitor/components/TickscriptHeader.tsx

@@ -28,7 +28,7 @@ class TickscriptHeader extends Component<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {
       task,
       onSave,

ui/src/kapacitor/containers/KapacitorRulesPage.tsx

@@ -91,7 +91,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
     <PageHeader
       title="Manage Tasks"
-      renderPageControls={renderPageControls}
+      renderPageControls={renderHeaderOptions()}
       sourceIndicator={true}
     />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
@@ -104,7 +104,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   </div>
 )
 
-const renderPageControls = (): JSX.Element => {
+const renderHeaderOptions = (): JSX.Element => {
   return (
     <QuestionMarkTooltip
       tipID="manage-tasks--tooltip"

ui/src/logs/components/LogViewerHeader.tsx

@@ -38,7 +38,7 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
-  private renderHeaderTitle = (): JSX.Element => {
+  private get renderHeaderTitle(): JSX.Element {
     return (
       <>
         {this.status}
@@ -47,7 +47,7 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
-  private renderPageControls = (): JSX.Element => {
+  private get renderPageControls(): JSX.Element {
     const {timeRange} = this.props
 
     return (

ui/src/shared/components/PageHeader.tsx

@@ -6,8 +6,8 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 interface Props {
   title?: string
-  renderTitle?: () => ReactElement<any>
-  renderPageControls?: () => ReactElement<any>
+  renderTitle?: ReactElement<any>
+  renderPageControls?: ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
   inPresentationMode?: boolean
@@ -55,7 +55,7 @@ class PageHeader extends Component<Props> {
       return <Title title={title} />
     }
 
-    return renderTitle()
+    return renderTitle
   }
 
   private get renderRight(): JSX.Element {
@@ -65,7 +65,7 @@ class PageHeader extends Component<Props> {
       return
     }
 
-    return renderPageControls()
+    return renderPageControls
   }
 
   private get className(): string {

ui/src/status/containers/StatusPage.js

@@ -61,7 +61,7 @@ class StatusPage extends Component {
         <PageHeader
           title="Status"
           fullWidth={true}
-          renderPageControls={this.renderPageControls}
+          renderPageControls={this.renderPageControls()}
         />
         <FancyScrollbar className="page-contents">
           <div className="dashboard container-fluid full-width">