diff --git a/src/components/Alert.js b/src/components/Alert.js
index f1a83ecbc0..a1ae4c24ca 100644
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -1,26 +1,15 @@
-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 {
+export const Alert = (props) => {
+  const { id, type, title, description } = props;
 
-  render() {
+  return (
+    <div id={`${id}_alert`} className={`alert-wrapper ${type}`}>
+      {title !== undefined && <h4 id={`${id}_title`} className='alert-title'>{title}</h4>}
+      {description !== undefined && <span id={`${id}_description`} className='alert-description'>{description}</span>}
+    </div>
+  );
+}
 
-    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 default Alert;