title: Why do I lose the current object state when 'this.props.actions.updateComment(event.target.value)' is called?
body: <p>I trying trying to achieve the following: There is a textfield and once a user enters in a text, an object is created with the text assigned to a state property called 'commentText' which is located inside the 'comments' array which is inside the object (todo[0]) of 'todos' array. 'commentInput' is just a temporary storage for the input entered in the textfield, to be assigned to the 'commentText' of 'todo[0]' object's 'comments' array. </p>
  
  <p>I retrieve the current state object via following:</p>
  
  <pre><code>const mapStateToProps=(state, ownProps)=&gt;({
    todo:state.todos.filter(todo=&gt;todo.id==ownProps.params.id)
  });
  </code></pre>
  
  <p>and dispatch and actions via: </p>
  
  <pre><code>function mapDispatchToProps(dispatch){
    return{
  actions: bindActionCreators(actions, dispatch)
  }
  </code></pre>
  
  <p>So the retrieved object 'todo' has an array property named comments. I have a text field that has: </p>
  
  <pre><code>onChange={this.handleCommentChange.bind(this)}
  </code></pre>
  
  <p>which does: </p>
  
  <pre><code>  handleCommentChange(event){
      this.props.actions.updateComment(event.target.value)
    }
  </code></pre>
  
  <p>Before handleCommentChange is called, the object 'todo[0]' is first fetched correctly: </p>
  
  <p><a href="https://i.stack.imgur.com/wz2H9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wz2H9.png" alt="enter image description here"></a></p>
  
  <p>But as soon as a text is inputted into the text field, onChange={this.handleCommentChange.bind(this)} is called and all of a sudden, 'todo[0]' state is all lost (as shown in the 'next state' log): </p>
  
  <p><a href="https://i.stack.imgur.com/FfSeB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FfSeB.png" alt="enter image description here"></a></p>
  
  <p>What may be the issue? Tried solving it for hours and hours but still stuck. Any guidance or insight would be greatly appreciated. Thank you in advance.</p>
  
  <p>EDIT **:</p>
  
  <pre><code>  {
      this.props.newCommentsArray.map((comment) =&gt; {
        return &lt;Comment key={comment.id} comment={comment} actions={this.props.actions}/&gt;
      })
    }
  </code></pre>
  
  <p>EDIT 2 **</p>
  
  <pre><code>case 'ADD_COMMENT':
    return todos.map(function(todo){
  //Find the current object to apply the action to
      if(todo.id === action.id){
  //Create a new array, with newly assigned object
        return var newComments = todo.comments.concat({
          id: action.id,
          commentTxt: action.commentTxt  
        })
      }
      //Otherwise return the original array
      return todo.comments 
    })
  </code></pre>