title: Can not update table field onchange of select
body: <p>I have table structure is like:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr class="selected"&gt;&lt;th&gt;number&lt;/th&gt;&lt;td&gt;&lt;input type="number"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;th&gt;name&lt;/th&gt;&lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;&lt;/tr&gt; ...
  &lt;/table&gt;
  </code></pre>
  
  <p>I have created textarea and select using reactjs to change <code>th</code> and <code>td</code> accordingly..
  Code:</p>
  
  <pre><code>var MySelect = React.createClass({
              getInitialState: function() {
                  return {
                      value: '',
                      label: ''
                  }
              },
              change: function(event){
                  this.setState({value: event.target.value});                  
              },
              textChange:function(event){                    
                  this.setState({label: event.target.value});                    
              },
              render: function(){
                  if($('.selected').length &gt;0 &amp;&amp; $('.selected').find('td').length&gt;0){ var stateValue = {this}; $('.selected').find('th')[0].innerHTML = stateValue.this.state.label; }
                  if($('.selected').length &gt;0 &amp;&amp; $('.selected').find('td').length&gt;0){ var newTag = &lt;input type={this.state.value}/&gt;; $('.selected').find('td')[0].innerHTML = {newTag} }
                  return(
                      &lt;div&gt;
                        &lt;p&gt;Field label&lt;/p&gt;
                        &lt;textarea rows="3" cols="30" className="inputControl" id="field_name" onChange={this.textChange}&gt;&lt;/textarea&gt;&lt;br /&gt;
                        &lt;br /&gt;
                        &lt;p&gt;Field type&lt;/p&gt;
                          &lt;select className="inputControl" id="field_control" onChange={this.change} value={this.state.value}&gt;                        
                              &lt;option value="text"&gt;Textbox&lt;/option&gt;
                              &lt;option value="number"&gt;Number&lt;/option&gt;
                              &lt;option value="checkbox"&gt;Checkbox&lt;/option&gt;
                              &lt;option value="radio"&gt;Radio&lt;/option&gt;
                              &lt;option value="textarea"&gt;Textarea&lt;/option&gt;
                              &lt;option value="select"&gt;Dropdown&lt;/option&gt;
                              &lt;option value="multiple"&gt;Multiple Choice&lt;/option&gt;
                              &lt;option value="date"&gt;Date&lt;/option&gt;
                              &lt;option value="phone"&gt;Phone&lt;/option&gt;
                              &lt;option value="address"&gt;Address&lt;/option&gt;
                              &lt;option value="email"&gt;Email&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;div id="selectOption" style={{display: 'none'}}&gt;
                          &lt;p&gt;
                              Choices
                          &lt;/p&gt;
                          &lt;div className="space"&gt;
                              &lt;input type="text" className="inputControl" /&gt;&lt;/div&gt;
                          &lt;div className="space"&gt;
                              &lt;input type="text" className="inputControl" /&gt;&lt;span&gt; &lt;i className="fa fa-plus-circle icon add"
                                  title="Add another choice"&gt;&lt;/i&gt;&lt;i className="fa fa-minus-circle icon remove" title="Delete this choice"&gt;
                                  &lt;/i&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className="space"&gt;
                              &lt;input type="text" className="inputControl" /&gt;
                              &lt;span&gt;&lt;i className="fa fa-plus-circle icon add" title="Add another choice"&gt;&lt;/i&gt;&lt;i className="fa fa-minus-circle icon remove"
                                  title="Delete this choice"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;                  
                          &lt;p&gt;&lt;input type={this.state.value} /&gt;&lt;/p&gt;
                   &lt;/div&gt;
              );
          }
      });
  </code></pre>
  
  <p>textarea is helped to change the <code>th</code> field and select to change <code>td</code> field..When I select from select option then tag will be change <code>&lt;p&gt;&lt;input type={this.state.value} /&gt;&lt;/p&gt;</code> but it shows <code>[OBJECT OBJECT]</code> in error line..I want to change <code>td</code> according to selected value from select option..Can I do <code>var newTag = &lt;input type={this.state.value}/&gt;; $('.selected').find('td')[0].innerHTML = {newTag}</code> in <code>change:</code> ?..Am I missing something this? please suggest me..</p>
  
  <p><strong>UPDATE</strong>
  I can change th value but when I click to second td and again first td then it shows old text..</p>