diff --git a/src/components/Alert.js b/src/components/Alert.js
index f1a83ecbc..ec7a219fb 100644
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -1,26 +1,11 @@
-import { Component } from 'react';
-import { div, hh, h4, span } from 'react-hyperscript-helpers';
+import React from 'react';
 import './Alert.css';
 
-export const Alert = hh(class Alert extends Component {
-
-  render() {
-
-    return div({
-      id: this.props.id + '_alert',
-      className: 'alert-wrapper ' + (this.props.type)
-    }, [
-      h4({
-        id: this.props.id + '_title',
-        className: 'alert-title',
-        isRendered: this.props.title !== undefined
-      }, [this.props.title]),
-      span({
-        id: this.props.id + '_description',
-        className: 'alert-description',
-        isRendered: this.props.description !== undefined
-      }, [this.props.description]),
-    ]);
-  }
-
-});
+export const Alert = ({ id, type, title, description }) => {
+  return (
+    <div id={`${id}_alert`} className={`alert-wrapper ${type}`}>
+      {title && <h4 id={`${id}_title`} className="alert-title">{title}</h4>}
+      {description && <span id={`${id}_description`} className="alert-description">{description}</span>}
+    </div>
+  );
+};