diff --git a/client/homebrew/brewRenderer/errorBar/errorBar.jsx b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
index 0b030c668..e951e4aaa 100644
--- a/client/homebrew/brewRenderer/errorBar/errorBar.jsx
+++ b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
@@ -7,67 +7,36 @@ import Dialog from '../../../components/dialog.jsx';
 
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
-const ErrorBar = ( props ) => {
-    let hasOpenError = false;
-    let hasCloseError = false;
-    let hasMatchError = false;
+const ErrorBar = (props) => {
+    let hasOpenError = false, hasCloseError = false, hasMatchError = false;
 
-    const renderErrors = () => {
-        hasOpenError = false;
-        hasCloseError = false;
-        hasMatchError = false;
+    const renderErrors = () => (
+        <ul>
+            {_.map(props.errors, (err, idx) => {
+                if (err.id === 'OPEN') hasOpenError = true;
+                if (err.id === 'CLOSE') hasCloseError = true;
+                if (err.id === 'MISMATCH') hasMatchError = true;
+                return (
+                    <li key={idx}>
+                        Line {err.line} : {err.text}, '{err.type}' tag
+                    </li>
+                );
+            })}
+        </ul>
+    );
 
-        const errors = _.map(props.errors, (err, idx) => {
-            if (err.id === 'OPEN') hasOpenError = true;
-            if (err.id === 'CLOSE') hasCloseError = true;
-            if (err.id === 'MISMATCH') hasMatchError = true;
-
-            return (
-                <li key={idx}>
-                    Line {err.line} : {err.text}, '{err.type}' tag
-                </li>
-            );
-        });
-
-        return <ul>{errors}</ul>;
-    };
-
-    const renderProtip = () => {
-        const msg = [];
-        if (hasOpenError) {
-            msg.push(
-                <div key="openError">
-                    An unmatched opening tag means there's an opened tag that isn't closed. You need to close your tags, like this {'</div>'}. Make sure to match types!
-                </div>
-            );
-        }
-
-        if (hasCloseError) {
-            msg.push(
-                <div key="closeError">
-                    An unmatched closing tag means you closed a tag without opening it. Either remove it, or check to where you think you opened it.
-                </div>
-            );
-        }
-
-        if (hasMatchError) {
-            msg.push(
-                <div key="matchError">
-                    A type mismatch means you closed a tag, but the last open tag was a different type.
-                </div>
-            );
-        }
-
-        return (
-            <div className="protips">
-                <h4>Protips!</h4>
-                {msg}
-            </div>
-        );
-    };
+    const renderProtip = () => (
+        <div className="protips">
+            <h4>Protips!</h4>
+            {hasOpenError && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
+            {hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
+            {hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
+        </div>
+    );
 
     if (!props.errors.length) return null;
 
+
     return (
         <Dialog className="errorBar" closeText={DISMISS_BUTTON} >
 			<div className="content">