title: Dynamically assigning the ref to textarea, but it's returning the last field value.
body: <p>As stated in title,
  Only the last form of the array returned value. Other form returned empty. 
  Need help understanding how:</p>
  
  <pre><code>addComment(event) {
      event.preventDefault();
  
      const commentContent = this.refs.commentContent.value;
  
      console.log(commentContent);
      this.refs.commentContent.value = '';
  
  }
  
  renderArticleList() {
     return (
         this.props.articles.map( (article) =&gt; {
            const articleId = article._id;
            return (
               &lt;div key={articleId}&gt;
  
                  &lt;form onSubmit={this.addComment.bind(this)}&gt;
                     &lt;textarea ref="commentContent"/&gt;
                     &lt;button type="submit"&gt;Add Comment&lt;/button&gt;
                  &lt;/form&gt;
  
               &lt;/div&gt;
            )
         })
      )
   }
  </code></pre>
  
  <p>Code Solutions to solve problem greatly appreciated. 
  Links to help understand and solve the problem also great.</p>