reactjs select radio input based on the props

Question

working on a simple web app. user clicks on edit button and the edit area is filled with the data. i am able to prefill the input text but i am unable to check the radio input based on the props. this is the link the jsfiddle

https://jsfiddle.net/aas312/sqqwagco/

var data = [{value:15,locName:"A"},{value:30,locName:"B"}];
//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} 
                       defaultChecked={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 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}/>
        <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

Use checked instead of defaultChecked prop for checkbox elements:

<input type="radio" checked={this.props.radioAttr.checked} ...

From React docs:

The defaultValue and defaultChecked props are only used during initial render. If you need to update the value in a subsequent render, you will need to use a