React working with dynamically generated nodes
<p>I just started with React and I'm trying to make a list where the user can enter a record number and the fields get auto populated, with the ability to add / delete rows and update them then save.</p>

<p>So far I got it to search successfully and update the two empty rows I manually inserted (I don't know how to get the add button to work yet), but I need to add that functionality, as well as the ability to delete a row while keeping everything else including any values the user updated on the other lines.</p>

<p>I've been playing with setState and I've tried doing in in the parent but I can't get it to work properly, here is my code so far:</p>

<pre><code>      var empty_item = {
        "id": "",
        "order_id": "",
        "status": "",
        "currency": "",
        "authorized_service_cents": "",
        "authorized_mileage_cents": "",
        "zen_id": "",
        "parent_zen_id": "",
        "ffs": "",
        "wotypetext": "",
        "first_name": "",
        "last_name": "",
        "phone_number": "",
        "secondary_phone_number": "",
        "z_cx_id": "",
        "email": ""
      }

      var WorkOrderTableRow = React.createClass({
        getInitialState: function(){
          return {
            item: empty_item,
            notice: '',
            notice_class: 'hide_notice'
          };
        },
        getWO: function(event){
          console.log("In Get WO");
          if(event.target.value &amp;&amp; event.target.value.length &gt;= 7){
            console.log(event.target.value);
            var url = "/api/wo/" + event.target.value;
            $.ajax({
              url: url,
              dataType: 'json',
              cache: false,
              success: function(result) {
                if(result.rows &amp;&amp; result.rows.length &gt; 0){
                  this.setState({item: result.rows[0], notice: '', notice_class: 'hide_notice'});
                }else{
                  this.setState({item: empty_item, notice: result.message, notice_class: 'show_notice red-bg'});
                }
                console.log(result);
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(url, status, err.toString());
              }.bind(this)
            });
          }else{
            this.setState({item: empty_item, notice: '', notice_class: 'hide'});
          }
        },
        handleWOChange: function(event){
          this.getWO(event);
          // this.state.data()
        },
        render: function(){
          return(
            &lt;tr className="workOrderTableRow formRow wrapper"&gt;
              &lt;td className="w_192"&gt;
                &lt;input type="text" ref="wo" onChange={this.handleWOChange}/&gt;
                &lt;span className="tooltip"&gt;
                    &lt;span className={this.state.notice_class}&gt;{this.state.notice}&lt;/span&gt;
                &lt;/span&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div className="w_70"&gt;{this.state.item.parent_zen_id}&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div className="w_192"&gt;{this.state.item.first_name} {this.state.item.last_name}&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div className="w_192"&gt;{this.state.item.wotypetext}&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div className="w_70"&gt;{this.state.item.authorized_service_cents / 100}&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div className="w_70"&gt;{this.state.item.authorized_mileage_cents /100}&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input type="text" className="w_70" placeholder="" value={this.state.item.amount_cents}/&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;TaxCodeList tax_code_id={this.state.item.tax_code_id}/&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;ExpenseTypeList expense_type={this.state.item.expense_type} /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input type="checkbox" className="pointer" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input type="button" className="btn-small row-extra remove-row red-bg pointer" value="X" /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          );
        }
      });

      //This is a component
      var MainWrapper = React.createClass({
        render: function(){
          return(
            &lt;div className="mainWrapper wrapper"&gt;
              This is the main wrapper
              &lt;InvoiceWrapper /&gt;
              &lt;ResultWrapper /&gt;
            &lt;/div&gt;
          );
        }
      });

      var ResultWrapper = React.createClass({

        render: function(){
          var getWO = this.getWO;

          return(
            &lt;div className="resultWrapper wrapper"&gt;
              &lt;div className="resultListWrapper wrapper"&gt;
                Results show here
              &lt;/div&gt;
              &lt;div className="entriesWrapper wrapper"&gt;
                &lt;form&gt;
                  &lt;table className="work_order_table" cellPadding="0" cellSpacing="0"&gt;
                    &lt;tbody&gt;
                      &lt;tr className="formRow wrapper table_header"&gt;
                        &lt;td className="w_192"&gt;Work Order #&lt;/td&gt;
                        &lt;td className="w_70"&gt;Case&lt;/td&gt;
                        &lt;td className="w_192"&gt;Customer&lt;/td&gt;
                        &lt;td className="w_192"&gt;Service&lt;/td&gt;
                        &lt;td className="w_70"&gt;Auth Amt.&lt;/td&gt;
                        &lt;td className="w_70"&gt;Auth Mil.&lt;/td&gt;
                        &lt;td className="w_70"&gt;Amount&lt;/td&gt;
                        &lt;td className="w_70"&gt;Tax Code&lt;/td&gt;
                        &lt;td className="w_192"&gt;Expense Type&lt;/td&gt;
                        &lt;td className="w_70"&gt;&lt;/td&gt;
                        &lt;td className="w_70"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;WorkOrderTableRow /&gt;
                      &lt;WorkOrderTableRow /&gt;
                      &lt;tr className="saveRow wrapper"&gt;
                        &lt;td colSpan="10" className="left-text"&gt;
                          &lt;input type="button" id="post" name="post" className="post btn pointer green-bg" value="POST" /&gt;
                          &lt;input type="button" id="save_post" name="save_post" className="save_post btn mar-lft-5 pointer orange-bg" value="SAVE &amp; POST" /&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                          &lt;input type="button" className="btn-small row-extra add-row green-bg pointer" value="+" /&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tbody&gt;
                  &lt;/table&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      });

      ReactDOM.render(
        &lt;MainWrapper /&gt;,
        document.getElementById('content')
      );
</code></pre>

<p>Also, when I was experimenting with doing everything in the parent I kept losing focus in the textbox being typed in after the refresh, if we can avoid that it would be great.</p>

<p>Your insight is appreciated.</p>