title: React - "setState" is not a function
body: <p>I have a view which shows a table with rows of data from a local wamp database. Each row has a View, Edit and Delete button which allows a user to View, Edit and Delete records respectively.
  <a href="https://i.stack.imgur.com/q1X5s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q1X5s.png" alt="enter image description here"></a></p>
  
  <p>Clicking on a row's Delete button will bring up a confirmation modal and is deleted when the modal's Delete button is clicked.
  <a href="https://i.stack.imgur.com/QrNlU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QrNlU.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>Right now, clicking on the Delete button throws up these errors:</p>
  
  <blockquote>
    <p>Warning: setState(...): You passed an undefined or null state object; instead, use forceUpdate().
    Uncaught TypeError: this.setState(...) is not a function</p>
  </blockquote>
  
  <p>I also get a warning when trying to bind a variable:</p>
  
  <blockquote>
    <p>Warning: bind(): React component methods may only be bound to the component instance. See GamePlatformTable</p>
  </blockquote>
  
  <p>I've tried using <code>forceUpdate</code> in place of <code>setState</code> from stuff I've been searching, but I get the same 2nd errors. If it helps, I'm using <strong>php, CodeIgniter 3.0.3</strong> and <strong>native React 0.14.3</strong>. I'm still relatively new to React, and thanks for helping.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;?php defined('BASEPATH') OR exit('No direct script access allowed'); ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;?php
      $this-&gt;load-&gt;view("templates/meta_common");
      $this-&gt;load-&gt;view("templates/css_common");
      ?&gt;
  
      &lt;title&gt;Video Game Portal Admin&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;?php $this-&gt;load-&gt;view("admin/admin_navbar"); ?&gt;
  
      &lt;div class="page-header"&gt;
          &lt;h1&gt;
              &lt;i class="text-info fa fa-file-text-o"&gt;&lt;/i&gt; Browse Game Platforms&amp;nbsp;
              &lt;span class="badge"&gt;REACT JS&lt;/span&gt;
              &lt;button onclick="window.location.replace('&lt;?= site_url("admin/game_platform/add_game_platform/") ?&gt;')" type="button"
                      class="btn btn-danger"&gt;&lt;i class="fa
              fa-plus"&gt;&lt;/i&gt; Add Game Platform
              &lt;/button&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;?php $this-&gt;load-&gt;view("admin/template_user_message"); ?&gt;
  
      &lt;div id="GamePlatformTable"&gt;
      &lt;/div&gt;
  
      &lt;?php $this-&gt;load-&gt;view("admin/admin_footer"); ?&gt;
  &lt;/div&gt;
  
  &lt;?php $this-&gt;load-&gt;view("templates/js_common"); ?&gt;
  
  &lt;script src="&lt;?=RESOURCES_FOLDER?&gt;js/react.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?=RESOURCES_FOLDER?&gt;js/react-dom.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?=RESOURCES_FOLDER?&gt;js/JSXTransformer.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?=RESOURCES_FOLDER?&gt;jsx/BrowseGamePlatform.js" type="text/jsx;harmony=true"&gt;&lt;/script&gt;
  
  &lt;script type="text/jsx"&gt;
  var gamePlatforms = &lt;?=json_encode($game_platforms)?&gt;;
  
  ReactDOM.render(
      &lt;GamePlatformTable
          gamePlatforms = {gamePlatforms}
          siteUrl = "&lt;?=site_url()?&gt;"
      /&gt;,
      document.getElementById("GamePlatformTable")
  );
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>External React:</strong></p>
  
  <p>The error occurs in the <strong>deleteButtonClicked</strong> function of <strong>GamePlatformTable</strong>.</p>
  
  <pre><code>var rowIndex = 0;
  
  var GamePlatformRow = React.createClass({
  
      render: function () {
          ++rowIndex;
  
          var developer = !this.props.gamePlatform.developer || this.props.gamePlatform.developer == "none" ?
              &lt;span className="text-placeholder"&gt;none&lt;/span&gt; : this.props.gamePlatform.developer;
  
          var year_intro = !this.props.gamePlatform.year_intro || this.props.gamePlatform.year_intro == "0" ?
              &lt;span className="text-placeholder"&gt;0&lt;/span&gt; : this.props.gamePlatform.year_intro;
  
          var logo_img = this.props.gamePlatform.logo_url ?
              &lt;img className="img-rounded" src={this.props.siteUrl + "/uploads/" + this.props.gamePlatform.logo_url}
                   alt={this.props.gamePlatform.abbr} width="50px" height="50px"/&gt; :
              &lt;span className="text-placeholder"&gt;no logo&lt;/span&gt;;
  
          var view_action = &lt;a
              href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
              type="button" className="btn btn-default"&gt;&lt;i className="fa fa-eye"&gt;&lt;/i&gt; View&lt;/a&gt;;
  
          var edit_action = &lt;a
              href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
              type="button" className="btn btn-default"&gt;&lt;i className="fa fa-file-text-o"&gt;&lt;/i&gt; Edit&lt;/a&gt;;
  
          return (
              &lt;tr&gt;
                  &lt;td&gt;{rowIndex}&lt;/td&gt;
                  &lt;td&gt;{this.props.gamePlatform.platform_name}&lt;/td&gt;
                  &lt;td&gt;&lt;span className="badge"&gt;{this.props.gamePlatform.abbr}&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;{logo_img}&lt;/td&gt;
                  &lt;td&gt;{developer}&lt;/td&gt;
                  &lt;td&gt;{year_intro}&lt;/td&gt;
                  &lt;td&gt;
                      {view_action}&amp;nbsp;
                      {edit_action}&amp;nbsp;
                      &lt;button type="button" className="btn btn-default"
                              onClick={this.props.deleteButtonClicked.bind(this, this.props.gamePlatform.platform_id)}&gt;&lt;i
                          className="fa fa-trash"&gt;&lt;/i&gt; Delete
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          );
      }
  }); //end GamePlatformRow
  
  var GamePlatformTable = React.createClass({
  
      getInitalState: function () {
          return {
              gamePlatforms: this.props.gamePlatforms,
              deletePlatformId: null
          };
      },
  
      refreshTableData: function () {
          var data = {
              "gamePlatforms": this.props.gamePlatforms
          };
  
          $.ajax({
              url: this.props.siteUrl + "game_platform/json_get_all_platforms",
              dataType: "json",
              data: data,
              cache: false,
              success: function (data) {
                  this.setState({gamePlatforms: data.gamePlatforms});
              }.bind(this),
              error: function (xhr, status, err) {
                  console.error(this.props.siteUrl + "game_platform/json_get_by_platform_id", status, err.toString());
              }.bind(this)
          });
      },
  
      confirmDeleteClicked: function () {
          var data = {
              "platform_id": this.state.deletePlatformId
          }
  
          $.ajax({
              type: "POST",
              url: this.props.siteUrl + "game_platform/json_delete_by_platform_id",
              dataType: "json",
              data: data,
              success: function (data) {
                  this.refreshTableData();
              }.bind(this),
              error: function (xhr, status, err) {
                  this.refreshTableData();
              }.bind(this)
          });
      },
  
      deleteButtonClicked: function (platform_id) {
          console.log("GamePlatformTable.deleteButtonClicked\nplatform_id: " + platform_id);
          $("#ConfirmDeleteModal").modal("show");
          this.setState()({
              deletePlatformId: platform_id
          }).bind(this);
      },
  
      render: function () {
          var rows = [];
          this.props.gamePlatforms.forEach(
              function (gamePlatform) {
                  rows.push(&lt;GamePlatformRow gamePlatform={gamePlatform} key={gamePlatform.platform_id}
                                             siteUrl={this.props.siteUrl}
                                             deleteButtonClicked={this.deleteButtonClicked}/&gt;);
              }.bind(this)
          );
  
          return (
              &lt;div className="table-responsive"&gt;
                  &lt;table className="table table-hover" id="GamePlatformTable"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;Platform Name&lt;/th&gt;
                          &lt;th&gt;Platform Abbr&lt;/th&gt;
                          &lt;th&gt;Platform Logo&lt;/th&gt;
                          &lt;th&gt;Platform Developer&lt;/th&gt;
                          &lt;th&gt;First Release Year&lt;/th&gt;
                          &lt;th&gt;&amp;nbsp;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody&gt;{rows}&lt;/tbody&gt;
                  &lt;/table&gt;
  
                  &lt;div className="modal fade" id="ConfirmDeleteModal"&gt;
                      &lt;div className="modal-dialog"&gt;
                          &lt;div className="modal-content"&gt;
                              &lt;div className="modal-header"&gt;
                                  &lt;button type="button" className="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span
                                      aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                  &lt;h4 className="modal-title"&gt;Delete Game Platform&lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div className="modal-body"&gt;
                                  &lt;p&gt;Are you sure?&lt;/p&gt;
  
                                  &lt;p&gt;This action &lt;strong className="text-danger"&gt;cannot&lt;/strong&gt; be undone.&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div className="modal-footer"&gt;
                                  &lt;button type="button" onclick={this.confirmDeleteClicked} className="btn btn-danger"
                                          data-dismiss="modal"&gt;&lt;i className="fa fa-trash"&gt;&lt;/i&gt; Delete
                                  &lt;/button&gt;
                                  &lt;button type="button" className="btn btn-default" data-dismiss="modal"&gt;&lt;i
                                      className="fa fa-ban"&gt;&lt;/i&gt; Cancel
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }); // end GamePlatformTable
  </code></pre>
  
  <hr>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>Removing the <code>.bind(this)</code> removed the <em>bind warning</em>.</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>I forgot to add, the <code>console.logs()</code> are showing the correct IDs.</p>