title: ReactJS component not rendering textarea with state variable
body: <p>I am facing an intriguing bug in React.</p>
  <p>I have this component:</p>
  <pre><code>'use strict';
  import SummaryStore from '../stores/SummaryStore';
  import React from 'react';
  
  export default class ChangeSummaryForm extends React.Component {
     constructor() {
         // store initialisation
         SummaryStore.register();
         
         var vRating = SummaryStore.getBookForSummaryPrint().summaryRating;
         var vStarClassName = this.getRatingClasses(vRating);
         this.state = {
              sStarClassName: vStarClassName,
              sCurrentBookToShow: SummaryStore.getBookForSummaryPrint()
         };
         
          this.thereIsASummaryToShow = this.thereIsASummaryToShow.bind(this);
      }
      
    getRatingClasses(pRating) {
        var vI, vStarClassName = [];
         for(vI = 0; vI &lt; 4; vI++) {
            if(pRating &gt; 0) {
               vStarClassName.push(&quot;glyphicon glyphicon-star&quot;);
               pRating--;
            } else {
               vStarClassName.push(&quot;glyphicon glyphicon-star-empty&quot;);
            }
         }
        return vStarClassName;
    }
    componentDidMount() {
      SummaryStore.addChangeListener(this.thereIsASummaryToShow);
    }
  
    componentWillUnmount() {
      SummaryStore.removeChangeListener(this.thereIsASummaryToShow);
    }
      
    thereIsASummaryToShow() {
        
        this.setState({sCurrentBookToShow: SummaryStore.getBookForSummaryPrint(),
                       sStarClassName: this.getRatingClasses(SummaryStore.getBookForSummaryPrint().rating)
                      });
        $(&quot;#summaryModal&quot;).modal('show');
      }
      render() {
          return (&lt;div className=&quot;modal fade&quot; id=&quot;summaryModal&quot;&gt;
                    &lt;form&gt;
                      &lt;div className=&quot;modal-dialog&quot;&gt;
                      &lt;div className=&quot;modal-content&quot;&gt;
                        &lt;div className=&quot;modal-header&quot;&gt;
                          &lt;button type=&quot;button&quot; className=&quot;close&quot; data-dismiss=&quot;modal&quot; ariaLabel=&quot;Close&quot;&gt;&lt;span ariaHidden=&quot;true&quot;&gt;&amp;times;                  &lt;/span&gt;                           &lt;/button&gt;
                  &lt;div style={{color: 'black'}}&gt;
                      {this.state.sStarClassName.map(function(pCurrentClassName) { return (&lt;span className={pCurrentClassName}&gt;&lt;/span&gt;
                                                                                     );
                                                                                   })}
                          &lt;h4 className=&quot;modal-title&quot;&gt;Summary of {this.state.sCurrentBookToShow.title}&lt;/h4&gt;
                  &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div className=&quot;modal-body&quot;&gt;
  
                              &lt;div className=&quot;form-group&quot;&gt;
                                  &lt;textarea className=&quot;form-control&quot; rows=&quot;22&quot; ref=&quot;summaryContent&quot; &gt;{this.state.sCurrentBookToShow.summary}&lt;/textarea&gt;
                              &lt;/div&gt;
  
                        &lt;/div&gt;
                        &lt;div className=&quot;modal-footer&quot;&gt;
                          &lt;button type=&quot;button&quot; className=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot; &gt;Close&lt;/button&gt;
                          &lt;input type=&quot;submit&quot; className=&quot;btn btn-primary&quot; value=&quot;Save&quot;/&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                 );
      }
  }
  </code></pre>
  <p>As you might notice, it's a <a href="https://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view" rel="noreferrer">controller-view</a> listening at a store which is registered to my AppDispatcher.</p>
  <p>The steps above are correctly performed. i.e, when the particular action is triggerd, my component is correctly rendered with the variables  <code>{this.state.sCurrentBookToShow.title}</code> and <code>this.state.sCurrentBookToShow.title</code> up-to-date.</p>
  <p><strong>The problem</strong> comes from this part:</p>
  <pre><code>&lt;textarea className=&quot;form-control&quot; rows=&quot;22&quot; ref=&quot;summaryContent&quot; &gt;   
    {this.state.sCurrentBookToShow.summary}
   &lt;/textarea&gt;
  </code></pre>
  <p>The string is not printed in the textarea.</p>
  <p>I tried this to debug:</p>
  <pre><code>    render() {
       var summary = &quot;this is a summary&quot;;
       return (// .. shortened for brevity
        &lt;textarea className=&quot;form-control&quot; rows=&quot;22&quot; ref=&quot;summaryContent&quot;&gt;
         {summary}
      &lt;/textarea&gt; ..);
      }
  </code></pre>
  <p>the <code>summary</code> string printed correctly inside the mutable textearea.</p>
  <p>Note that my browser says:</p>
  <blockquote>
  <p>Warning: Use the <code>defaultValue</code> or <code>value</code> props instead of setting
  children on <code>&lt;textarea&gt;</code>.</p>
  </blockquote>
  <p>But I will fix this later since I think it doesn't have an effect on the current problem.</p>
  <p><strong>EDIT:</strong>
  I took your remarks (so far) in consideration, so I updated my code like so:</p>
  <pre><code>                &lt;h4 className=&quot;modal-title&quot;&gt;Summary of {this.state.sCurrentBookToShow.summary}&lt;/h4&gt;
          &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;modal-body&quot;&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          {this.state.sCurrentBookToShow.summary}
                          &lt;textarea className=&quot;form-control&quot; rows=&quot;22&quot; ref=&quot;summaryContent&quot; defaultValue={this.state.sCurrentBookToShow.summary}&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
  </code></pre>
  <ul>
  <li>I replaced <code>this.state.sCurrentBookToShow.title</code> by <code>.summary</code> to make
  sure the ladder is not empty.</li>
  <li>I put the summary into a <code>defaultValue</code> prop</li>
  </ul>
  <p>Here is the output:
  <img src="https://i.stack.imgur.com/HuXMQ.png" alt="enter image description here" /></p>
  <p>Second edit:</p>
  <p>I uploaded a sample <a href="https://github.com/MayasHaddad/react-flux-textarea-bug" rel="noreferrer">app</a> that highlights the issue. I hope this would help to find a proper solution</p>