title: How can I add the value of a button to a textarea when clicking the button?
body: <p>I have a textarea, in which user can write a comment. To make their life easy I also have set of buttons which basically have predefined value. These are quick comments button that can be clicked and it should add the value of button to the textarea. Its almost like StackOverflow's tags search box where you can type to add the tags or you can select the suggested tags by SO, that are outside the search box on the bottom. </p>
  
  <p>If I am able to render/added the comments value on text area with the existing text in the text area that would solve my problem i think. thank you </p>
  
  <p>Picture of what the UI component looks like : 
  <img src="https://i.stack.imgur.com/14n5C.png" alt="quick comments and text area"></p>
  
  <p>The <code>savePatientComment()</code> is how I save the value of the textArea. </p>
  
  <p>savePatientComment( { target: { name, value } }, data, index ){</p>
  
  <pre><code>    this.setState({
  
          patientInfo: this.state.patientInfo.map((patient, i) =&gt; {
              if (i === index) {
                  return { ...patient, [name]: value };
              }
              return patient;
          }),
      });
  
  }
  </code></pre>
  
  <p>Patient Row component </p>
  
  <pre><code>  &lt;div&gt;
       &lt;Button value="quick comments-1" onClick={//add the value to text area}&gt;Quick comments&lt;/Button&gt;
       &lt;Button value="quick comments-2" onClick={//add the value to text area}&gt;Quick comments&lt;/Button&gt;
       &lt;Button value="quick comments-3" onClick={//add the value to text area}&gt;Quick comments&lt;/Button&gt;
  
    &lt;/div&gt;
    &lt;textarea
             className="patient-comment-textarea"
             placeholder="type your comments here"
             name="comment"
             value={patient.comment}
             onChange={(e) =&gt; savePatientComment(e, patient, index)} &gt;
    &lt;/textarea&gt;
  </code></pre>