Adding Alert container to hold index and click handler.

src/components/alerts/alert.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import bindAll from 'lodash.bindall';
 
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 
 import styles from './alert.css';
 
-class AlertComponent extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleOnCloseAlert'
-        ]);
-    }
-    handleOnCloseAlert () {
-        this.props.onCloseAlert(this.props.index);
-    }
-    render () {
-        return (
-            <Box
-                className={styles.alert}
-            >
-                <div className={styles.alertMessage}>
-                    {this.props.iconURL ? (
-                        <img
-                            className={styles.alertIcon}
-                            src={this.props.iconURL}
-                        />
-                    ) : null}
-                    {this.props.message}
-                </div>
-                <Button
-                    className={styles.alertRemoveButton}
-                    onClick={this.handleOnCloseAlert}
-                >
-                    {'x'}
-                </Button>
-            </Box>
-        );
-    }
-}
+const AlertComponent = ({
+    iconURL,
+    message,
+    onCloseAlert
+}) => (
+    <Box
+        className={styles.alert}
+    >
+        <div className={styles.alertMessage}>
+            {iconURL ? (
+                <img
+                    className={styles.alertIcon}
+                    src={iconURL}
+                />
+            ) : null}
+            {message}
+        </div>
+        <Button
+            className={styles.alertRemoveButton}
+            onClick={onCloseAlert}
+        >
+            {'x'}
+        </Button>
+    </Box>
+);
 
 AlertComponent.propTypes = {
     iconURL: PropTypes.string,
-    index: PropTypes.number,
     message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired
 };

src/containers/alert.jsx

+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+
+import AlertComponent from '../components/alerts/alert.jsx';
+
+class Alert extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleOnCloseAlert'
+        ]);
+    }
+    handleOnCloseAlert () {
+        this.props.onCloseAlert(this.props.index);
+    }
+    render () {
+        return (
+            <AlertComponent
+                iconURL={this.props.iconURL}
+                message={this.props.message}
+                onCloseAlert={this.handleOnCloseAlert}
+            />
+        );
+    }
+}
+
+Alert.propTypes = {
+    iconURL: PropTypes.string,
+    index: PropTypes.number,
+    message: PropTypes.string,
+    onCloseAlert: PropTypes.func.isRequired
+};
+
+export default Alert;

src/containers/alerts.jsx

@@ -8,7 +8,7 @@ import {
 } from '../reducers/alerts';
 
 import Box from '../components/box/box.jsx';
-import AlertComponent from '../components/alerts/alert.jsx';
+import Alert from '../containers/alert.jsx';
 
 const Alerts = ({
     alertsList,
@@ -20,7 +20,7 @@ const Alerts = ({
         className={classNames(className)}
     >
         {alertsList.map((a, index) => (
-            <AlertComponent
+            <Alert
                 iconURL={a.iconURL}
                 index={index}
                 key={index}