title: React radio button button checked attribute not working
body: <p>I have a react component that resembles a radio button input section. I have the checked attribute on each radio input set to a true or false expression, but it does not end up working when I run it.</p>
  <p>Any idea on why the item isn't being lit up when a new item is selected? When I log the expression (console.log), I get the correct result.</p>
  <p>My code looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>class MyClass extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              currentItem: 1,
            }
      }
  
      updateCurrentItem = (event) =&gt; {
          let key = `${event.currentTarget.id}`;
          this.currentItem = key;
          console.log(!(1 % this.currentItem));
      }
  
      isOn(id) {
          return (!(id % this.currentItem));
      }
  
      render() {
  
          return (
              &lt;div className=&quot;iconList&quot;&gt;
  
                  &lt;input type=&quot;radio&quot; id=&quot;one&quot; name=&quot;picker&quot; value=&quot;one&quot; checked={this.isOn(1)}/&gt;
                  &lt;label for=&quot;one&quot;&gt;&lt;button id={1} onClick={this.updateCurrentItem}&gt;One&lt;/button&gt;&lt;/label&gt;
  
                  &lt;input type=&quot;radio&quot; id=&quot;two&quot; name=&quot;picker&quot; value=&quot;two&quot; checked={this.isOn(2)}/&gt;
                  &lt;label for=&quot;two&quot;&gt;&lt;button id={2} onClick={this.updateCurrentItem}&gt;Two&lt;/button&gt;&lt;/label&gt;
  
                  &lt;input type=&quot;radio&quot; id=&quot;three&quot; name=&quot;picker&quot; value=&quot;three&quot; checked={this.isOn(3)}/&gt;
                  &lt;label for=&quot;three&quot;&gt;&lt;button id={3} onClick={this.updateCurrentItem}&gt;&lt;Three&lt;/button&gt;&lt;/label&gt;
  
                  &lt;input type=&quot;radio&quot; id=&quot;four&quot; name=&quot;picker&quot; value=&quot;four&quot; checked={this.isOn(4)}/&gt;
                  &lt;label for=&quot;four&quot;&gt;&lt;button id={4} onClick={this.updateCurrentItem}&gt;Four&lt;/button&gt;&lt;/label&gt;
              &lt;/div&gt;
              
              );
          }
  }
  
  export default MyClass;
  
  </code></pre>
  <p>Any help is much appreciated. Thanks!</p>