title: How to render checked radio button in React
body: <p>I came of with a solution for pre checked radio button based on JSON data but I think the code can be improved. Or there should be a better way to implement it. The data is structure in following way:</p>
  
  <pre><code>  {
          radioA: 'Radio A',
          radioB: 'Radio B',
          radioC: 'Radio C',
          selected: 'Radio A'
      }
  </code></pre>
  
  <p>Not sure if this is the best way to do it. The data structure can be modified if needed. </p>
  
  <p>Based on the data provided I am rendering radio button with one of them pre-selected. Following is what I have.</p>
  
  <pre><code>var App = React.createClass({
  
  getInitialState: function(){
      return {
          radioA: 'Radio A',
          radioB: 'Radio B',
          radioC: 'Radio C',
          selected: 'Radio A'
      }
  },
  
  render: function(){
      return(
          &lt;div&gt;                
              {Object.keys(this.state).map(function(key) {
                  // Not displaying the selected data
                  if(key !== 'selected'){
  
                      // Checked radio button
                      if(this.state[key] == this.state['selected']){
                          return(
                              &lt;div&gt;
                                  &lt;label className="radio-inline" key={key} htmlFor={key}&gt;
                                      &lt;input id={key} type="radio" checked value={key} /&gt; {this.state[key]}
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          );
                      }
  
                      else{
                          return(
                              &lt;div&gt;
                                  &lt;label className="radio-inline" key={key} htmlFor={key}&gt;
                                      &lt;input id={key} type="radio" value={key} /&gt; {this.state[key]}
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          );
                      }
                  }
              }, this)} 
          &lt;/div&gt;
      );
   }
   });
  
   React.render(&lt;App /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p>The code is set up following jsfiddle.com 
  <a href="https://jsfiddle.net/rexonms/2x7ey2L5/" rel="nofollow">https://jsfiddle.net/rexonms/2x7ey2L5/</a></p>
  
  <p>Is there a better solution to implement this? Thanks in advance</p>