reactjs radio button selected is not changed after user click and how to select dropdown option based on the selected edit

Question

working on a simple web app. user clicks on edit button and the edit area is filled with the data.

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

https://jsfiddle.net/aas312/wn7jLyj5/1/

    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 (
            <div>
                <input type="radio" name={this.props.group} value={this.props.radioAttr.value}
                       checked={this.props.radioAttr.checked}
                       onClick={this.handleClick} />
                {this.props.radioAttr.label}
            </div>
        );
    }
});

var RadioSet = React.createClass({
    render: function () {
        var radioElements = [];
        this.props.radios.forEach(function (r) {
            radioElements.push(<RadioElement group={this.props.group} radioAttr={r}
                                             handleClick={this.props.handleClick} />);
        }.bind(this));
        return (
            <div>{radioElements}</div>
        );
    }
});
//

var LocRow = React.createClass({
    handleClick:function(){
        this.props.handleEditClick(this.props.location);
  },
    render:function(){
    return (
        <tr>
        <td>{this.props.location.locName}</td>
        <td>{this.props.location.value}</td>
        <td><button onClick={this.handleClick}>Edit</button></td>
        </tr>
    )
  }
});
var LocTable = React.createClass({
    render:function(){
   var locRows = [];
   this.props.locs.forEach(function(loc){
      locRows.push(<LocRow location={loc} handleEditClick={this.props.handleEditClick} />)
   }.bind(this));
    return (
        <div>
        <table>
            {locRows}
        </table>
        </div>
    );
  }
});
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 (
        <input type="text" value={this.props.loc.locName} ref="locRef" onChange={this.handleChange} />
    );
  }
});

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 (

             <div>
                 Delivery is disabled on app before regular hours closes.<br />
                <RadioSet group="locValue"
                          radios={locValueOptions}
                          handleClick={this.handleRadioClick} />
             </div>
        );
    }
});
var EditDelivery = React.createClass({
  handleChange:function(e){
    var userSelectedOption = e.target.value;
    this.setState({ selectedOption: userSelectedOption });
  },
    getInitialState:function(){
        return {selectedOption:"0"}
  },
    render:function(){
    return (
        <select value={this.state.selectedOption} onChange={this.handleChange}>
        <option value="1">Yes</option>
        <option value="0">No</option>
      </select>
    );
  }
});
var EditLoc = React.createClass({
    render:function(){
    return (
        <div>
        <h3>Edit Data</h3>
        <EditName loc={this.props.loc} handleDataChange={this.props.handleDataChange} />
        <LocValueEdit locValue={this.props.loc.value} />
        <EditDelivery delivery={this.props.loc.delivery}/>
        <button>Update</button>
        </div>
    );
  }
});

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 (
                <div>
            <LocTable locs={this.props.data} handleEditClick={this.handleEditClick} />
                    <EditLoc loc={this.state.editingLoc} handleDataChange={this.handleDataChange} />
                </div>
    );
  }
});

ReactDOM.render(
  <App data={data} />,
  document.getElementById('container')
);

Answer 1

At first, I would suggest you to simplify your component hierarchy, because right now there are too many components, which creates mess. Decomposition is the key concept when it comes to creating hierarchy, but one should not overdo it. Secondly, you should have a look at Flux, which will stop handing your props over many intermediate components, which don't need these props at all.

Regarding your radio button, I would provide him with onChange callback rather than onClick. Additionally, if you look at the callback called on click event (the method is in LocValueEdit component), it does nothing, and since your radio buttons value is determined by its parents props, you cant expect it to change. About issue 2, I don't quite understand what you mean.

Rethink your design and you will not have such a hardtime finding issues in your code.