Adding Alerts container to handle click, and pass key prop appropriately.

src/components/alerts/alerts.jsx

@@ -8,8 +8,8 @@ import Button from '../button/button.jsx';
 import styles from './alert.css';
 
 const Alerts = ({
-    className,
     alertsList,
+    className,
     onCloseAlert
 }) => (
     <Box
@@ -22,14 +22,17 @@ const Alerts = ({
                 key={index}
             >
                 <div className={styles.alertMessage}>
-                    <img className={styles.alertIcon} src={a.iconURL} /> {a.message} {a.name}.
+                    <img
+                        className={styles.alertIcon}
+                        src={a.iconURL}
+                    /> {a.message} {a.name} {'.'}
                 </div>
                 <Button
                     className={styles.alertRemoveButton}
-                    onClick={() => onCloseAlert(index)}
+                    key={index}
+                    onClick={onCloseAlert}
                 >
-                    { /* eslint-disable react/jsx-no-literals */ }
-                    x
+                    {'x'}
                 </Button>
             </Box>
         ))}

src/containers/alerts.jsx

+import React from 'react';
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
 import {
@@ -7,6 +10,33 @@ import {
 
 import AlertsComponent from '../components/alerts/alerts.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}
+            />
+        );
+    }
+}
+
+Alerts.propTypes = {
+    alertsList: PropTypes.arrayOf(PropTypes.object),
+    className: PropTypes.string,
+    onCloseAlert: PropTypes.func
+};
+
 const mapStateToProps = state => ({
     visible: state.scratchGui.alerts.visible,
     alertsList: state.scratchGui.alerts.alertsList
@@ -20,4 +50,4 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(AlertsComponent);
+)(Alerts);

src/reducers/alerts.js

@@ -14,7 +14,7 @@ const reducer = function (state, action) {
     case SHOW_ALERT: {
         const newList = state.alertsList.slice();
         const newAlert = {message: action.data.message};
-        if (action.data.extensionId) {
+        if (action.data.extensionId) { // if it's an extension
             const extension = extensionData.find(ext => ext.extensionId === action.data.extensionId);
             if (extension && extension.name) {
                 newAlert.name = extension.name;
@@ -23,6 +23,7 @@ const reducer = function (state, action) {
                 newAlert.iconURL = extension.smallPeripheralImage;
             }
         }
+        // TODO: add cases for other kinds of alerts?
         newList.push(newAlert);
         return Object.assign({}, state, {
             alertsList: newList