fix: ∆

demo/index.html

@@ -20,8 +20,10 @@ <h4>Instance 1</h4>
       function buttonHandler(type){
           // To trigger an alert... dispatch 'triggerAlert' with valid type and message
           document.body.dispatchEvent(new CustomEvent('triggerAlert', {
-            alertType   : type,
-            alertMessage: type + ' test message'
+              "detail":{
+                "alertType"   : type,
+                "alertMessage": type + ' test message'
+              }
           }));
         console.log(type + " alertTriggered!")
       }

main.js

@@ -8,6 +8,7 @@ export default class AlertsComponent {
   constructor(config) {
 
     this.init(config);
+
   }
 
   init(config) {

src/js/alert.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Icon  from './icon';
 
 const Alert = (props) => (
-  <li
+  <span
     key       = {props.key}
     className = {`pe-alert pe-template__static-small ${props.closeTitleProp}`}
     id        = {`${props.alertType}`}
@@ -19,7 +19,7 @@ const Alert = (props) => (
         {props.alertMessage}
       </span>
 
-  </li>
+  </span>
 )
 
 export default Alert;

src/js/component-owner.js

@@ -1,7 +1,7 @@
 import React, { Component }      from 'react';
 import { intlShape, injectIntl } from 'react-intl';
 import Alert                     from './alert';
-// import Helper                    from './helper';
+import Helper                    from './helper';
 
 import '../scss/component-specific.scss';
 
@@ -23,24 +23,27 @@ class ComponentOwner extends Component {
       alertList    : []
     };
 
-    // this.handleClose  = _handleClose.bind(this);
+    this.handleClose  = _handleClose.bind(this);
     this.renderAlert  = _renderAlert.bind(this);
 
   }
 
 
   componentDidMount() {
-    // const { alertList } = this.state;
-    document.body.addEventListener('triggerAlert',
-      alert => console.log(alert)
-    );
+    const { alertList } = this.state;
+    document.body.addEventListener( 'triggerAlert', e => {
+      const a = alertList
+      a.push(e.detail)
+      this.setState({alertList:a})
+    });
   }
 
 
   render () {
     const { alertList } = this.state;
-    console.log(alertList[0])
-    return this.state.alertList.length > 0 ? alertList.forEach( (alert, index) => <ul>{this.renderAlert(alert, index)}</ul> ) : null;
+    // console.log(alertList instanceof Array)
+    // console.log(alertList.forEach(a => console.log(a)))
+    return alertList.length > 0 ? this.renderAlert(alertList) : null;
   }
 
 
@@ -52,36 +55,37 @@ export default injectIntl(ComponentOwner);
 
 
 
-function _renderAlert (alert, index) {
-  return (
-    <Alert
-      key            = {index}
-      opacity        = {1}
-      closeTitleProp = {this.state.closeProp}
-      alertType      = {alert.alertType}
-      alertMessage   = {alert.alertMessage}
-      handleClose    = {this.handleClose}
-    />
-  );
+function _renderAlert (alertList) {
+  alertList.forEach((alert, index) => {
+    return (
+      <Alert
+        key            = {index}
+        opacity        = {1}
+        closeTitleProp = {this.state.closeProp}
+        alertType      = {alert.alertType}
+        alertMessage   = {alert.alertMessage}
+        handleClose    = {this.handleClose}
+      />
+  )})
 }
 
 
-// function _handleClose() {
-//
-//   const alert1 = document.getElementById('demo-target1');
-//
-//   const removeEL = () => {
-//     if (this.state.alertIsOpen === false) {
-//       alert1.removeEventListener(Helper.whichTransitionEvent(), removeEL);
-//     }
-//   }
-//
-//   this.setState({
-//     // closeProp    : 'close-title-animation',
-//     opacity      : 0,
-//     closeProp    : '',
-//     alertType    : '',
-//     alertMessage : ''
-//   });
-//
-// };
+function _handleClose() {
+
+  const alert1 = document.getElementById('demo-target1');
+
+  const removeEL = () => {
+    if (this.state.alertIsOpen === false) {
+      alert1.removeEventListener(Helper.whichTransitionEvent(), removeEL);
+    }
+  }
+
+  this.setState({
+    closeProp    : 'close-title-animation',
+    opacity      : 0,
+    // closeProp    : '',
+    alertType    : '',
+    alertMessage : ''
+  });
+
+};