Moving click handling to alert component from container in order to handle...

Moving click handling to alert component from container in order to handle index correctly.  Removed AlertsComponent and added new AlertComponent.

src/components/alerts/alerts.jsx → src/components/alerts/alert.jsx

-import classNames from 'classnames';
 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';
 
-const Alerts = ({
-    alertsList,
-    className,
-    onCloseAlert
-}) => (
-    <Box
-        bounds="parent"
-        className={classNames(className)}
-    >
-        {alertsList.map((a, index) => (
+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}
-                key={index}
             >
                 <div className={styles.alertMessage}>
-                    {a.iconURL ? (
+                    {this.props.iconURL ? (
                         <img
                             className={styles.alertIcon}
-                            src={a.iconURL}
+                            src={this.props.iconURL}
                         />
                     ) : null}
-                    {a.message}
+                    {this.props.message}
                 </div>
                 <Button
                     className={styles.alertRemoveButton}
-                    key={index}
-                    onClick={onCloseAlert}
+                    onClick={this.handleOnCloseAlert}
                 >
                     {'x'}
                 </Button>
             </Box>
-        ))}
-    </Box>
-);
+        );
+    }
+}
 
-Alerts.propTypes = {
-    alertsList: PropTypes.arrayOf(PropTypes.object),
-    className: PropTypes.string,
+AlertComponent.propTypes = {
+    iconURL: PropTypes.string,
+    index: PropTypes.number,
+    message: PropTypes.string,
     onCloseAlert: PropTypes.func.isRequired
 };
 
-export default Alerts;
+export default AlertComponent;

src/containers/alerts.jsx

+import classNames from 'classnames';
 import React from 'react';
-import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
@@ -7,28 +7,29 @@ import {
     closeAlert
 } from '../reducers/alerts';
 
-import AlertsComponent from '../components/alerts/alerts.jsx';
+import Box from '../components/box/box.jsx';
+import AlertComponent from '../components/alerts/alert.jsx';
 
-class Alerts extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleOnCloseAlert'
-        ]);
-    }
-    handleOnCloseAlert (e) {
-        this.props.onCloseAlert(e.target.key);
-    }
-    render () {
-        return (
-            <AlertsComponent
-                alertsList={this.props.alertsList}
-                className={this.props.className}
-                onCloseAlert={this.handleOnCloseAlert}
+const Alerts = ({
+    alertsList,
+    className,
+    onCloseAlert
+}) => (
+    <Box
+        bounds="parent"
+        className={classNames(className)}
+    >
+        {alertsList.map((a, index) => (
+            <AlertComponent
+                iconURL={a.iconURL}
+                index={index}
+                key={index}
+                message={a.message}
+                onCloseAlert={onCloseAlert}
             />
-        );
-    }
-}
+        ))}
+    </Box>
+);
 
 Alerts.propTypes = {
     alertsList: PropTypes.arrayOf(PropTypes.object),