title: React - too much recursion
body: <p>I'm still almost new to <code>react</code>. When I open my webpage the console shows me this:</p>
  
  <blockquote>
    <p>Too much recursion</p>
  </blockquote>
  
  <p>I actually cannot find the reason where the error comes from.
  What I already determined is, that the error occurs when I'm using the component <code>CreateFreightEntryModal</code>. If I uncomment this in the <code>FreightList</code> component, the error disappears.</p>
  
  <p>Here is the code for both the components. Maybe someone of you can find the recursion.</p>
  
  <p><strong>FreightList.js:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Freight from './Freight';
  import CreateFreightEntryModal from './CreateFreightEntryModal';
  import createFragment from 'react-addons-create-fragment'; // ES6
  
  class FreightList extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              search: "",
              freights: [],
              parent: props.parent,
              updateZonesTable: props.updateZonesTable
          };
          this.loadFreights();
      }
  
      componentWillReceiveProps(nextProps) {
      }
  
  
      loadFreights() {
          $.ajax({
            type: "POST",
            context:this,
            dataType: "json",
            async: true,
            url: "../data/get/json/freight",
            data: ({ 
                _token : window.Laravel.csrfToken,
            }),
            success: function (data) {
  
                var arr = $.map(data, function(el) { 
                  return el; 
                });
  
                this.setState({
                  freights: arr
                });
  
            }
        });
      }
  
      handleFreightClick(freight, isChecked) {
          if(isChecked) {
              $('#freightListPanelBody').collapse();
              $.ajax({
                  type: "POST",
                  context:this,
                  dataType: "json",
                  async: true,
                  url: "../data/post/json/zones/getZonesByFreightId",
                  data: ({ 
                      _token : window.Laravel.csrfToken,
                      freightId: freight.id,
                  }),
                  success: function (data) {
                      this.props.updateZonesTable(data, freight);
                  }
              });
          }
      }
  
      updateSearch(event) {
          this.setState({ search: event.target.value.substr(0,20) })
      }
  
      onClose(event) {
          event.preventDefault();
      }
  
      openCreateModal(event) {
          $('#createFreightEntryModal').modal();
      }
  
  
      onClick() {
  
      }
  
      render() {
          return (
              &lt;div className="panel-group"&gt;
                  &lt;div className="panel panel-default"&gt;
                      &lt;div className="panel-heading"&gt;
                          &lt;a className="accordion-toggle" data-toggle="collapse" href="#freightListPanelBody"&gt;&lt;i className="glyphicon glyphicon-menu-down" aria-hidden="true"&gt;&lt;/i&gt; Freights&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div className="panel-body" id="freightListPanelBody" className="collapse in"&gt;
                          &lt;div className="row padding10px"&gt;
                              &lt;div className="col-xs-12 col-sm-12 col-md-9 col-lg-9"&gt;
                                  &lt;div className="form-group"&gt;
                                      &lt;button className="btn btn-default" onClick={this.openCreateModal.bind(this)}&gt;Create new entry&lt;/button&gt;
                                      &lt;CreateFreightEntryModal onClose={this.onClose.bind(this)} onClick={this.onClick.bind(this)} /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className="row padding10px"&gt;
                              &lt;div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
                                  Search
                              &lt;/div&gt;
                              &lt;div className="col-xs-12 col-sm-12 col-md-9 col-lg-9"&gt;
                                  &lt;div className="form-group"&gt;
                                      &lt;input className="form-control" type="text" value={this.state.search} placeholder="Search" onChange={this.updateSearch.bind(this)} /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="row padding10px"&gt;
                              &lt;div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
                                  &lt;div className="table-responsive list"&gt;
                                      &lt;table className="table table-hover table-striped" id="freightListTable"&gt;
                                          &lt;thead&gt;
                                              &lt;tr&gt;
                                                  ...
                                              &lt;/tr&gt;
                                              &lt;tr&gt;
                                                  ...
                                              &lt;/tr&gt;
                                          &lt;/thead&gt;
                                          &lt;tbody&gt;
                                          {
                                              this.state.freights.map((freight) =&gt; {
                                                return (
                                                  &lt;Freight freight={freight} onClick={this.handleFreightClick.bind(this)} key={freight.id} /&gt;
                                                );
                                              })
                                          }
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default FreightList
  </code></pre>
  
  <p><strong>Freight.js:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Freight extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              freight: props.freight,
              onClick: props.onClick,
              isChecked: false
          };
      }
  
      onClick(event) {
          $('#freightListTable').find("input").removeAttr("checked");
          this.setState({isChecked: !this.state.isChecked})
          this.props.onClick(this.state.freight, !this.state.isChecked);
      }
  
      render() {
          return (
  
                  &lt;tr className="cursorPointer" onClick={this.onClick.bind(this)}&gt;
                  ...
  
                  &lt;/tr&gt;
  
          );
      }
  }
  
  export default Freight
  </code></pre>
  
  <p><strong>CreateFreightEntryModal:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import SelectOption from './SelectOption';
  
  class CreateFreightEntryModal extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              freights: props.freights,
              onClose: props.onClose,
              onClick: props.onClick,
              companies: [],
              freighttypes: [],
              transportmodes: [],
              hauliers: [],
              warehouses: [],
              countries: [],
              placesOfDeparture: [],
              products: [],
              productgroups: [],
              suppliers: [],
              currencies: [],
          };
      }
  
      componentWillMount() {
          this.state = {
              companies: [],
              freighttypes: [],
              transportmodes: [],
              hauliers: [],
              warehouses: [],
              countries: [],
              placesOfDeparture: [],
              products: [],
              productgroups: [],
              suppliers: [],
              currencies: []
          }
      }
  
      componentWillUpdate(nextProps,nextState) {
          /*
          if(nextState.companies) {
              this.setState({
                  companies: nextState.companies,
              }, this.render);
              $('.selectpicker').selectpicker('render');
          }
          */
      }
  
      loadCompanies(event) {
          if(this.state.companies == undefined || this.state.companies.length == 0) {
              $.ajax({
                  type: "POST",
                  context:this,
                  dataType: "json",
                  async: true,
                  url: "../data/get/json/companies",
                  data: ({ 
                      _token : window.Laravel.csrfToken,
                  }),
                  success: data =&gt; {
                      var arr = $.map(data, function(el) { return el; });
                      this.setState({
                          companies: arr
                      });
                  }
              });
          }
          $('.selectpicker').selectpicker('toggle');
          $('.selectpicker').selectpicker('render');
          $('.selectpicker').selectpicker('refresh');
      }
  
      loadFreightTypes() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/freightTypes",
              data: ({ 
                  _token : window.Laravel.csrfToken,
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      freighttypes: arr
                  })
              }
          });
      }
  
      loadTransportModes() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/transportModes",
              data: ({ 
                  _token : window.Laravel.csrfToken,
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      transportmodes: arr
                  })
              }
          });
      }
  
      loadHauliers() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/haulier",
              data: ({ 
                  _token : window.Laravel.csrfToken,
                  filter: "noStopFlag",
                  value: "0",
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      hauliers: arr
                  })
              }
          });
      }
  
      loadWarehouses() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/warehouses",
              data: ({ 
                  _token : window.Laravel.csrfToken,
                  filter: "noStopFlag",
                  value: "0",
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      warehouses: arr
                  })
              }
          });
      }
  
      loadCountries() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/countries",
              data: ({ 
                  _token : window.Laravel.csrfToken,
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      countries: arr
                  })
              }
          });
      }
  
      loadPlacesOfDeparture() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/placesOfDeparture",
              data: ({ 
                  _token : window.Laravel.csrfToken,
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      placesOfDeparture: arr
                  })
              }
          });
      }
  
      loadProducts() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/products",
              data: ({ 
                  _token : window.Laravel.csrfToken, 
                  filter: "noStopFlag",
                  value: "0",
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      products: arr
                  })
              }
          });
      }
  
      loadProductGroups() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/productgroups",
              data: ({ 
                  _token : window.Laravel.csrfToken, 
                  filter: "noStopFlag",
                  value: "0",
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      productgroups: arr
                  })
              }
          });
      }
  
      loadSuppliers() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/suppliers",
              data: ({ 
                  _token : window.Laravel.csrfToken, 
                  filter: "byBrancheAndStopFlag",
                  branche: "2",
                  stopFlag: "0",
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      suppliers: arr
                  })
              }
          });
      }
  
      loadCurrencies() {
          $.ajax({
              type: "POST",
              context:this,
              dataType: "json",
              async: true,
              url: "../data/get/json/currencies",
              data: ({ 
                  _token : window.Laravel.csrfToken, 
              }),
              success: function (data) {
                  var arr = $.map(data, function(el) { return el; });
                  this.setState({
                      currencies: arr
                  })
              }
          });
      }
  
      add(event) {
  
      }
  
      render() {
          return (
              &lt;div className="modal fade" id="createFreightEntryModal" tabIndex="-1" role="dialog"&gt;
                  &lt;div className="modal-dialog" role="document"&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;New freight entry&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div className="modal-body"&gt;
                              &lt;div&gt;
                                  &lt;div&gt;
                                      &lt;form onSubmit={this.add.bind(this)}&gt;
                                          &lt;div className="row"&gt;
                                              &lt;div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
                                                  &lt;strong&gt;Create a new freight entry:&lt;/strong&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div className="row"&gt;
                                              &lt;div className="col-xs-4 col-sm-4 col-md-4 col-lg-4"&gt;
                                                  Company
                                              &lt;/div&gt;
                                              &lt;div className="col-xs-8 col-sm-8 col-md-8 col-lg-8"&gt;
                                                  &lt;div className="form-group" onClick={this.loadCompanies.bind(this)}&gt;
                                                      &lt;select className="selectpicker show-tick form-control" data-id="selectBoxCompany" data-live-search="true" data-title="Please select" ref="Firma" required&gt;
                                                      {
                                                          this.state.companies.map((company)=&gt; {
                                                            return (
                                                              &lt;SelectOption value={company.Nummer} displayValue={company.Bezeichnung} key={company.id} /&gt;
                                                            );
                                                          })
                                                      }
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                                          ...
  
                                          &lt;div className="row"&gt;
                                              &lt;div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
                                                  &lt;div className="form-group"&gt;
                                                      &lt;button type="submit" className="btn btn-success"&gt;&lt;span className="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt; Save &lt;/button&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="modal-footer"&gt;
                              &lt;button type="button" className="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default CreateFreightEntryModal
  </code></pre>
  
  <p>The freight list is loaded via ajax request. Here is a sample of one freight entry:</p>
  
  <p><a href="https://i.stack.imgur.com/DSqO1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DSqO1.png" alt="freight entries list"></a></p>
  
  <p>The complete freight list consists of 539 freight entries.</p>
  
  <p>The line number is this:</p>
  
  <p><a href="https://i.stack.imgur.com/SJD7l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SJD7l.png" alt="enter image description here"></a></p>