diff --git a/ui/src/kapacitor/components/RuleMessageTemplates.js b/ui/src/kapacitor/components/RuleMessageTemplates.js
index 9b7883555..eb2ccbeba 100644
--- a/ui/src/kapacitor/components/RuleMessageTemplates.js
+++ b/ui/src/kapacitor/components/RuleMessageTemplates.js
@@ -12,9 +12,12 @@ class RuleMessageTemplates extends Component {
     super(props)
   }
 
-  render() {
-    const {rule, updateMessage} = this.props
+  handleClickTemplate = template => () => {
+    const {updateMessage, rule} = this.props
+    updateMessage(rule.id, `${rule.message} ${template.label}`)
+  }
 
+  render() {
     return (
       <div className="rule-section--row rule-section--row-last rule-section--border-top">
         <p>Templates:</p>
@@ -23,8 +26,7 @@ class RuleMessageTemplates extends Component {
             <CodeData
               key={key}
               template={template}
-              onClickTemplate={() =>
-                updateMessage(rule.id, `${rule.message} ${template.label}`)}
+              onClickTemplate={this.handleClickTemplate(template)}
             />
           )
         })}
diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.js
index fc737ed98..1716895fa 100644
--- a/ui/src/kapacitor/components/RuleMessageText.js
+++ b/ui/src/kapacitor/components/RuleMessageText.js
@@ -5,14 +5,18 @@ class RuleMessageText extends Component {
     super(props)
   }
 
-  render() {
+  handleChange = e => {
     const {rule, updateMessage} = this.props
+    updateMessage(rule, e.targe.value)
+  }
+
+  render() {
+    const {rule} = this.props
 
     return (
       <textarea
         className="form-control form-malachite monotype rule-builder--message"
-        ref={r => (this.message = r)}
-        onChange={() => updateMessage(rule.id, this.message.value)}
+        onChange={this.handleChange}
         placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}"
         value={rule.message}
         spellCheck={false}