title: React checkbox feature with only single selection
body: <p>I want to figure out whether my code is wrong or a bug. I think there is no problem, but it does not work...</p>
  
  <p>The code I used is:
  <a href="https://codepen.io/cadenzah/pen/wvwYLgj?editors=0010" rel="nofollow noreferrer">https://codepen.io/cadenzah/pen/wvwYLgj?editors=0010</a></p>
  
  <pre><code>class ItemView extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        options: [{
          id: 1,
          name: "Item 1"
        },
        {
          id: 2,
          name: "Item 2"
        }],
        optionSelected: 2
      }
    }
  
    toggleCheckbox(e) {
      console.log(e.target.id)
      if (this.state.optionSelected === e.target.id) {
        this.setState({
          optionSelected: undefined
        })
      } else {
        this.setState({ optionSelected: e.target.id })
      }
    }
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;ItemList
              options={this.state.options}
              optionSelected={this.state.optionSelected}
              toggleCheckbox={(e) =&gt; this.toggleCheckbox(e)} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const ItemList = ({ options, optionSelected, toggleCheckbox }) =&gt; {
    return (
      &lt;div className="col s12"&gt;
        {
          options.map((option, index) =&gt; (
            &lt;Item
              key={index}
              option={option}
              checked={(optionSelected === (index + 1) ? true : false)}
              toggleCheckbox={toggleCheckbox} /&gt;
          ))
        }
      &lt;/div&gt;
    )
  }
  
  const Item = ({ option, checked, toggleCheckbox }) =&gt; {
    return (
      &lt;div className="card"&gt;
        &lt;div className="card-content"&gt;
          &lt;p&gt;&lt;label htmlFor={option.id}&gt;
            &lt;input 
              className="filled-in"
              type="checkbox"
              id={option.id}
              onChange={toggleCheckbox}
              checked={(checked ? "checked" : "")} /&gt;
            &lt;span&gt;{option.id}. {option.name}&lt;/span&gt;
            &lt;/label&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <h3>Code explaination:</h3>
  
  <p>React code, with <code>materialize-css</code> used.</p>
  
  <p>It is a simple checkbox feature with multiple items, restricted to select only one item. So, if I check one of them, every item except for what I just selected will be unchecked automatically. If I uncheck what I just checked, every item will stay unchecked.</p>
  
  <p>The core logic is: in <code>&lt;ItemList /&gt;</code> component, there is a <em>conditional props</em> that determines whether each item has to be checked or not. It compares the id, and hand in <code>true</code> or <code>false</code> into its children. That <code>checked</code> props is used in <code>&lt;Item /&gt;</code> component to set the <code>checked</code> attribute of <code>&lt;input&gt;</code>.</p>
  
  <p>Strange thing is, as I set default choice in the initial state, when I just run the application, the check feature works as I expected. But if I click one of them, it does not work.</p>
  
  <p>What is the problem of it?</p>