title: ReactJS component textarea not updating on state change
body: <p>I'm trying to write a note taking/organizing app and I've run into a frustrating bug.</p>
  
  <p>Here's my component:</p>
  
  <pre><code>import React from 'react';
  
  const Note = (props) =&gt; {
    let textarea, noteForm;
    if (props.note) {
      return (
        &lt;div&gt;
          &lt;button onClick={() =&gt; {
            props.handleUpdateClick(props.selectedFolderId, props.selectedNoteId, textarea.value);
          }}&gt;
            Update
          &lt;/button&gt;
          &lt;textarea
            defaultValue={props.note.body}
            ref={node =&gt; {textarea = node;}}
          /&gt;
        &lt;/div&gt;
      );
    } else {
      return &lt;div&gt;&lt;/div&gt;;
    }
  };
  
  export default Note;
  </code></pre>
  
  <p>As it currently stands, whenever I switch between notes and rerender the note component with new content from the note.body prop, the textarea does not change and retains the content from the previous note. I've tried using the value attribute instead of the defaultValue attribute for the text area which doe fix the problem of the text area content not changing when the component rerenders, but when I do that I'm longer able to type in the textarea field to update the note</p>
  
  <p>Doe anyone know a way I can both allow for users to type in the text field to update the note as well as have the textarea content change when I render different notes?</p>
  
  <p>Thank you </p>