title: reactjs radio button selected is not changed after user click and how to select dropdown option based on the selected edit
body: <p>working on a simple web app.  user clicks on edit button and the edit area is filled with the data.  </p>
  
  <p>issue 1 i can select the radio button based on the selected edit, but i am not able to change the value.
  issue 2 for the dropdown i can change the selected option but i am not able to set the option when the edit is clicked</p>
  
  <p><a href="https://jsfiddle.net/aas312/wn7jLyj5/1/" rel="nofollow">https://jsfiddle.net/aas312/wn7jLyj5/1/</a></p>
  
  <pre class="lang-js prettyprint-override"><code>    var data = [{value:15,locName:"A",delivery:true},{value:30,locName:"B",delivery:false}];
  //Radiogroup component
  var RadioElement = React.createClass({
      handleClick:function(){
          this.props.handleClick();
      },
      render:function(){
          return (
              &lt;div&gt;
                  &lt;input type="radio" name={this.props.group} value={this.props.radioAttr.value}
                         checked={this.props.radioAttr.checked}
                         onClick={this.handleClick} /&gt;
                  {this.props.radioAttr.label}
              &lt;/div&gt;
          );
      }
  });
  
  var RadioSet = React.createClass({
      render: function () {
          var radioElements = [];
          this.props.radios.forEach(function (r) {
              radioElements.push(&lt;RadioElement group={this.props.group} radioAttr={r}
                                               handleClick={this.props.handleClick} /&gt;);
          }.bind(this));
          return (
              &lt;div&gt;{radioElements}&lt;/div&gt;
          );
      }
  });
  //
  
  var LocRow = React.createClass({
      handleClick:function(){
          this.props.handleEditClick(this.props.location);
    },
      render:function(){
      return (
          &lt;tr&gt;
          &lt;td&gt;{this.props.location.locName}&lt;/td&gt;
          &lt;td&gt;{this.props.location.value}&lt;/td&gt;
          &lt;td&gt;&lt;button onClick={this.handleClick}&gt;Edit&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
      )
    }
  });
  var LocTable = React.createClass({
      render:function(){
     var locRows = [];
     this.props.locs.forEach(function(loc){
        locRows.push(&lt;LocRow location={loc} handleEditClick={this.props.handleEditClick} /&gt;)
     }.bind(this));
      return (
          &lt;div&gt;
          &lt;table&gt;
              {locRows}
          &lt;/table&gt;
          &lt;/div&gt;
      );
    }
  });
  var EditName = React.createClass({
    handleChange:function() {
          var modLoc = this.props.loc;
      modLoc.locName = React.findDOMNode(this.refs.locRef).value;
      this.props.handleDataChange(modLoc);
    },
      render:function(){
      return (
          &lt;input type="text" value={this.props.loc.locName} ref="locRef" onChange={this.handleChange} /&gt;
      );
    }
  });
  
  var LocValueEdit = React.createClass({
     handleRadioClick:function(){
  
     },
      render: function () {
          var locValueOptions = [
              {
                  label: "15 M",
                  value: 15,
                  checked: false
              },
              {
                  label: "30 M",
                  value: 30,
                  checked: false
              },
              {
                  label: "60 M",
                  value: 60,
                  checked: false
              }
          ];
  
          locValueOptions.forEach(function (c) {
              if (c.value === this.props.locValue) {
                  c.checked = true;
              }
          }.bind(this));
          return (
  
               &lt;div&gt;
                   Delivery is disabled on app before regular hours closes.&lt;br /&gt;
                  &lt;RadioSet group="locValue"
                            radios={locValueOptions}
                            handleClick={this.handleRadioClick} /&gt;
               &lt;/div&gt;
          );
      }
  });
  var EditDelivery = React.createClass({
    handleChange:function(e){
      var userSelectedOption = e.target.value;
      this.setState({ selectedOption: userSelectedOption });
    },
      getInitialState:function(){
          return {selectedOption:"0"}
    },
      render:function(){
      return (
          &lt;select value={this.state.selectedOption} onChange={this.handleChange}&gt;
          &lt;option value="1"&gt;Yes&lt;/option&gt;
          &lt;option value="0"&gt;No&lt;/option&gt;
        &lt;/select&gt;
      );
    }
  });
  var EditLoc = React.createClass({
      render:function(){
      return (
          &lt;div&gt;
          &lt;h3&gt;Edit Data&lt;/h3&gt;
          &lt;EditName loc={this.props.loc} handleDataChange={this.props.handleDataChange} /&gt;
          &lt;LocValueEdit locValue={this.props.loc.value} /&gt;
          &lt;EditDelivery delivery={this.props.loc.delivery}/&gt;
          &lt;button&gt;Update&lt;/button&gt;
          &lt;/div&gt;
      );
    }
  });
  
  var App = React.createClass({
      getInitialState:function(){
      return {editingLoc:{locName:"",locValue:0}}
    },
      handleEditClick:function(loc){
      this.setState({editingLoc:loc});
    },
    handleDataChange:function(loc){
      alert(loc.locName);
    },
    render: function() {
      return (
                  &lt;div&gt;
              &lt;LocTable locs={this.props.data} handleEditClick={this.handleEditClick} /&gt;
                      &lt;EditLoc loc={this.state.editingLoc} handleDataChange={this.handleDataChange} /&gt;
                  &lt;/div&gt;
      );
    }
  });
  
  ReactDOM.render(
    &lt;App data={data} /&gt;,
    document.getElementById('container')
  );
  </code></pre>