title: React map always calls method with data of last element
body: <p>I am making a social media app. I am looping through all the comments and showing it on UI. When I click on edit, always the last comment's text show up on input. I tried many different things, changed structure, used bind to bind the context, but nothing has helped. </p>
  
  <p>I am using React Material UI.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>render() {
  
      const { anchorEl } = this.state;
      const open = Boolean(anchorEl);
  
      return(
          &lt;Panel&gt;
              &lt;form noValidate autoComplete="off" onSubmit={this.onSubmit}&gt;
                  &lt;TextField
                      id={`comment${this.state.post_id}`}
                      name="comment"
                      fullWidth
                      placeholder="Comment here"
                      margin="normal"
                      value={this.state.comment}
                      onChange={this.handleChange}
                      InputProps={{
                          endAdornment : &lt;InputAdornment position="end"&gt;
                              &lt;IconButton onClick={this.resetTextField}&gt;
                                  &lt;CloseIcon/&gt;
                              &lt;/IconButton&gt;
                          &lt;/InputAdornment&gt;
                      }}
                  /&gt;
              &lt;/form&gt;
  
              {this.props.comments &amp;&amp; this.props.comments.length &gt; 0 &amp;&amp;
              &lt;RenderComments
                  comments={this.state.comments}
                  open={open}
                  anchorEl={this.state.anchorEl}
                  handleClick={this.handleClick}
                  handleClose={this.handleClose}
                  handleDelete={this.handleDelete}
                  handleEdit={this.handleEdit}
              /&gt;
              }
          &lt;/Panel&gt;
      )
  }
  </code></pre>
  
  <hr>
  
  <pre><code>const RenderComments = (props) =&gt; {
      return props.comments.map(comment =&gt;
          &lt;CommentBase
              key={comment.id}
              comment={comment}
              open={props.open}
              anchorEl={props.anchorEl}
              handleClick={props.handleClick}
              handleClose={props.handleClose}
              handleDelete={props.handleDelete}
              handleEdit={props.handleEdit}
          /&gt;
      );
  };
  </code></pre>
  
  <hr>
  
  <pre><code>    const CommentBase = ({comment, open, anchorEl, handleClick, handleClose, handleDelete, handleEdit}) =&gt; (
      &lt;CommentBasePanel&gt;
          &lt;CommentText&gt;
              {comment.text}
              &lt;span style={{ float: 'right', fontSize: 10, color: '#A9A9A9' }}&gt;{moment(comment.created_at).fromNow()}&lt;/span&gt;
          &lt;/CommentText&gt;
          &lt;HelperAction&gt;
              &lt;MoreVertIcon
                  id={comment.id}
                  aria-owns={open ? `simple-popper${comment.id}` : null}
                  aria-haspopup="true"
                  variant="contained"
                  onClick={handleClick}
              /&gt;
              &lt;Popover
                  id={`simple-popper${comment.id}`}
                  open={open}
                  anchorEl={anchorEl}
                  onClose={handleClose}
                  anchorOrigin={{
                      vertical: 'bottom',
                      horizontal: 'right',
                  }}
                  transformOrigin={{
                      vertical: 'top',
                      horizontal: 'right',
                  }}
              &gt;
                  &lt;Typography style={{ padding: 10, cursor: 'pointer' }} onClick={() =&gt; handleEdit(comment)}&gt;
                      Edit
                  &lt;/Typography&gt;
                  &lt;Typography style={{ padding: 10, color: red[500], cursor: 'pointer' }} onClick={() =&gt; handleDelete(comment.id)}&gt;
                      Delete
                  &lt;/Typography&gt;
              &lt;/Popover&gt;
          &lt;/HelperAction&gt;
      &lt;/CommentBasePanel&gt;
  );
  </code></pre>
  
  <hr>
  
  <pre><code>handleEdit = (comment) =&gt; {
      this.setState({ comment: comment.text, comment_id: comment.id })
  };
  </code></pre>
  
  <p>A console log on comment here in handleEdit method always logs the last comment no matter what comment I edit. Edit on first comment gives last comment text as you can see in the image.</p>
  
  <p><a href="https://i.stack.imgur.com/lrXT6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lrXT6.png" alt="enter image description here"></a></p>