title: this.state undefined in React component render function
body: <p>I am newbie in ReactJS.
  Following function works well:</p>
  
  <pre><code>_renderTable: function() {
      return(
          React.DOM.table(null,
              React.DOM.thead( {onClick: this._sort},
                  React.DOM.tr(null,
                      this.props.headers.map(function (title, idx) {
                          if (this.state.sortby === idx) {
                              title += this.state.descending ? ' \u2191' : ' \u2193'
                          }
                          return React.DOM.th({key: idx}, title);
                      }, this)
                  )
              ),
              React.DOM.tbody( {onDoubleClick: this._showEditor},
                  this._renderSearch(),
                  this.state.data.map(function (row, rowidx) {
                      return(
                          React.DOM.tr({key: rowidx},
                              row.map(function (cell, idx) {
                                  var content = cell;
  
                                  //To-Do editable field on double click
                                  var edit = this.state.edit;
                                  if (edit &amp;&amp; edit.row === rowidx &amp;&amp; edit.cell === idx) {
                                      content = React.DOM.form({onSubmit: this._save},
                                          React.DOM.input({
                                              type: "text",
                                              defaultValue: content,
                                          })
                                      );
                                  }
                                  return React.DOM.td({
                                      key: idx,
                                      "data-row": rowidx
                                  }, content);
                              }, this)
                          )
                      );
                  }, this)
              )
          )
      );
  },
  </code></pre>
  
  <p>When I rewrite it using babel:</p>
  
  <pre><code>_renderTable: function() {
      return(
          &lt;table&gt;
              &lt;thead onClick={this._sort}&gt;
                  &lt;tr&gt;{
                      this.props.headers.map(function (title, idx) {
                          if (this.state.sortby === idx) {
                              title += this.state.descending ? ' \u2191' : ' \u2193'
                          }
                          return &lt;th key={idx}&gt;{title}&lt;/th&gt;
                      }, this)
                  }&lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody onDoubleClick={this._showEditor}&gt;
              {this._renderSearch()}
              {console.log("Hello", this.state)}
              {
                  this.state.data.map(function (row, rowidx) {
                      return(
                          &lt;tr key={rowidx}&gt;{
                              row.map(function (cell, idx) {
                                  var content = cell;
                                  console.log("Hello2", this);
                                  var edit = this.state.edit;
                                  if (edit &amp;&amp; edit.row === rowidx &amp;&amp; edit.cell === idx) {
                                      content = &lt;form onSubmit={this._save}&gt;
                                                  &lt;input type="text" defaultValue={content}&gt;
                                                  &lt;/input&gt;
                                              &lt;/form&gt;
                                  }
                                  return &lt;td key={idx}&gt;{content}&lt;/td&gt;
                              })
                          }&lt;/tr&gt;
                      );
                  })
              }
              &lt;/tbody&gt;
          &lt;/table&gt;
      );
  },
  </code></pre>
  
  <p>I get following error:</p>
  
  <pre class="lang-none prettyprint-override"><code>Uncaught TypeError: Cannot read property 'state' of undefined
  </code></pre>
  
  <p>replacing <code>var edit = this.state.edit;</code> with <code>var edit = false;</code> removes the error.</p>
  
  <p>Searching shows about binding <code>this</code> in a case of calling it in functions body so I tried to do it but without luck. Not sure that the issue in binding because non-JSX version of code working fine.</p>