title: How to fix problems with add-comment and remove-comment in react-redux app
body: <p>I'm writting react-redux comment's widget.Faced the following problem. When I click on the add comments button, no addition occurs, and when I click on delete a comment, he writes that map is not a function, although I pass an array of comments. Can you explain where i made a mistake</p>
  
  <p><strong>actions/index.js</strong></p>
  
  <pre><code>let nextCommentId = 0;
  
  export const ADD_COMMENT = 'ADD_COMMENT';
  export const REMOVE_COMMENT = 'REMOVE_COMMENT';
  
  
  export const addComment = (comment) =&gt; {
    return {
      type: ADD_COMMENT,
      id: nextCommentId++,
      payload: comment
      }
    }
  
  
  export const removeComment = (id) =&gt; {
    return {
      type: REMOVE_COMMENT,
      id
    }
  }
  </code></pre>
  
  <p><strong>components/add-comment.js</strong></p>
  
  <pre><code>import React, { Component, useState } from 'react';
  
  import { addComment } from '../actions/index.js'
  
  
  class AddComment extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        date: new Date(),
        text: '',
        name: ''
      };
  
    }
  
  
    render() {
      let comment = {
        name: this.state.name,
        text: this.state.text,
        date: this.state.date
      }
      return (
        &lt;div&gt;
          &lt;form&gt;
            &lt;label htmlFor="username"&gt;Введите ваше имя:&lt;/label&gt; &lt;br /&gt;
            &lt;input
            type="text"
            id="username"
            value={this.state.name}
            onChange={ev =&gt; {
              this.setState({ name: ev.target.value });
            }}
            /&gt; &lt;br /&gt;&lt;br /&gt;
  
            &lt;label htmlFor="usercomment"&gt;Введите ваш комментарий:&lt;/label&gt; &lt;br /&gt;
            &lt;textarea
              id="usercomment"
              rows="10"
              cols="40"
              value={this.state.text}
              onChange={ev =&gt; {
                this.setState({ text: ev.target.value });
              }}
            &gt;&lt;/textarea&gt; &lt;br /&gt;
          &lt;/form&gt;
            &lt;button
              className="btn"
              onClick={ev =&gt; {
                addComment(comment);
              }}
            &gt;
              Добавить комментарий
            &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  export default AddComment;
  </code></pre>
  
  <p><strong>components/comment-list.js</strong></p>
  
  <pre><code>import React from 'react';
  import AddComment from './add-comments.js';
  import { removeComment }  from '../actions/index';
  
  const CommentList = ({ comments , removeComment }) =&gt; {
    return (
          &lt;ul&gt;
            {
              comments.map((comment, index) =&gt; {
                debugger;
                return (
                  &lt;li key={index}&gt;
                    &lt;b&gt;
                    {comment.name + comment.date}
                    &lt;/b&gt; &lt;button
                    className="btn-remove"
                    onClick={ev =&gt; {
                      if (comments.length === 0) {
                        return comments
                      } else {
                      removeComment(index)
                      }
                    }}
                    &gt;
                    Удалить комментарий
                    &lt;/button&gt;&lt;br /&gt;
                      {comment.text}
                    &lt;/li&gt;
                  )
  
                })
              }
            &lt;/ul&gt;
    )
  }
  
  export default CommentList;
  </code></pre>
  
  <p><strong>containers/app.js</strong></p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  
  import CommentList from '../components/comment-list';
  import AddComment from '../components/add-comments';
  
  import { addComment,removeComment } from '../actions/index';
  
  let App = ({ comments, addComment, removeComment }) =&gt; {
  
    return (
      &lt;div&gt;
        &lt;CommentList comments={comments} removeComment={removeComment} /&gt;
        &lt;AddComment addComment={addComment}/&gt;
      &lt;/div&gt;
    )
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      comments: state.comments
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    debugger;
    return {
      addComment: (comment) =&gt; dispatch(addComment(comment)),
      removeComment: (id) =&gt; dispatch(removeComment(id))
    }
  }
  
  
  
  App = connect(
    mapStateToProps,
    mapDispatchToProps
  )(App);
  
  export default App;
  </code></pre>
  
  <p><strong>reducers/index.js</strong></p>
  
  <pre><code>import { ADD_COMMENT, REMOVE_COMMENT } from '../actions/index.js'
  
  const comments = (state = [], action) =&gt; {
    switch (action.type) {
      case ADD_COMMENT:
        return [
        ...state,
        action.payload
      ]
  
  
      case REMOVE_COMMENT:
        return state.comments.filter((comment, id) =&gt; id !== action.id);
  
      default:
        return state
    }
  }
  
  export default comments;
  </code></pre>
  
  <p><strong>src/index.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import { render } from 'react-dom';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import App from './containers/app.js';
  import { createStore } from 'redux';
  import   comments   from './reducers/index.js';
  
  
  export const initialState = {
    comments: [
      {name: 'John', text: 'good', date: '24 октября 17-56'}
    ]
  };
      ]
  
  
  const store = createStore( comments, initialState);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;,
    document.querySelector('#app')
  );
  </code></pre>