title: Conditionally setting html attributes in React.js
body: <p>I'm having a surprisingly hard time setting a default option for a radio button component in React.</p>
  
  <p>Here is my <code>RadioToggle</code> component:</p>
  
  <pre><code>/** @jsx React.DOM */
  var RadioToggle = React.createClass({
    render: function () {
      var self = this;
      return (
        &lt;div className="RadioToggle"&gt;
          {this.props.radioset.radios.map(function(radio, i){
            return (
              &lt;label className="__option" key={i}&gt;
                &lt;h3 className="__header"&gt;{radio.label}&lt;/h3&gt;
  
                {radio.checked ?
                  &lt;input className="__input"
                       type="radio"
                       name={self.props.radioset.name}
                       value={radio.value}
                       defaultChecked /&gt;
  
                : &lt;input className="__input"
                       type="radio"
                       name={self.props.radioset.name}
                       value={radio.value} /&gt;
                }
  
                &lt;span className="__label"&gt;&lt;/span&gt;
              &lt;/label&gt;
              )
            })
          }
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = RadioToggle;
  </code></pre>
  
  <p>And here is how I'm creating the component:</p>
  
  <pre><code>&lt;RadioToggle radioset={
    {
      name: "permission_level",
      radios: [
      {
        label: "Parent",
        value: 1,
        checked: false
      },
      {
        label: "Child",
        value: 0,
        checked: true
      }
    ]}
  }/&gt;
  </code></pre>
  
  <p>The above code works, but we don't like generating almost identical code depending on the <code>radio.checked</code> option.</p>
  
  <p>The way the component is set up, I pass it a name and an array of radios to create, and for each object in the radios array use that data to create a radio button.</p>
  
  <p>In other cases I've been able to conditionally set attributes by putting ternary statements as the value, like below, but that doesn't work here.</p>
  
  <p>The problem with <code>defaultChecked={radio.checked ? "checked" : ""}</code> is that even with the output becoming <code>checked="checked"</code> on one radio button and <code>checked</code> on the other, it makes both radio buttons checked by default, resulting in the last one <em>actually</em> being checked.</p>
  
  <p>Again, the component above works, but I'm hoping someone with some more experience with React will have a cleaner way of doing it rather than generating almost identical elements except for that attribute.</p>