import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import MessageItem from './MessageItem';
import { removeMessage } from '../../actions/messages';

class ShowMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: 'block',
    };
    this.close = this.close.bind(this);
  }
  close(name) {
    this.props.handleRemoveMessage(name);
  }
  render() {
    const messages = this.props.messages.map(item => (
      <MessageItem
        key={item.name}
        id={item.name}
        close={() => this.close(item.name)}
        message={item.message}
        type={item.type}
      />
    ));
    return messages;
  }
}

ShowMessages.defaultProps = {
  messages: [],
  handleRemoveMessage: () => 0,
};

ShowMessages.propTypes = {
  messages: PropTypes.array,
  handleRemoveMessage: PropTypes.func,
};

const mapStateToProps = state => ({
  messages: state.messages,
});

const mapDispatchToProps = dispatch => ({
  handleRemoveMessage(name) {
    dispatch(removeMessage(name));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(ShowMessages);

@@ -332,23 +332,21 @@
 ;%0A  
-  this.
+%7D%0A%0A  
 close = 
 this
@@ -345,48 +345,17 @@
 e = 
-this.close.bind(this);%0A  %7D%0A  close
 (name)
+ =%3E
  %7B%0A 
@@ -399,16 +399,17 @@
 e);%0A  %7D%0A
+%0A
   render
@@ -467,23 +467,16 @@
 tem =%3E (
-%0A      
 %3CMessage
@@ -480,18 +480,16 @@
 ageItem%0A
-  
       ke
@@ -498,26 +498,24 @@
 %7Bitem.name%7D%0A
-  
       id=%7Bit
@@ -529,18 +529,16 @@
 %7D%0A      
-  
 close=%7B(
@@ -571,18 +571,16 @@
 %7D%0A      
-  
 message=
@@ -600,18 +600,16 @@
 %7D%0A      
- 
- 
 type=%7Bit
@@ -625,18 +625,16 @@
     
-  
 /%3E
+)
 %0A    
-)
 );%0A 

use js class fields for this binding