title: React Array checkbox to check only one checkbox
body: <p>I have several checkbox groups on my <code>Component</code> of which only one of the should be selected. Each group has the same number of checkboxes (3 in the example), and the one selected is identified by the <code>checked</code> key inside the <code>data</code> list.</p>
  
  <p>How can I handle this state?</p>
  
  <pre><code>class test extends Component {
    constructor(props) {
      super(props);
      this.state = {};
      const data = [
        { name: orange, checked: 2 },
        { name: apple, checked: 3 },
        { name: banana, checked: 1 }
      ];
    }
  
    render() {
      return (
        &lt;&gt;
          {data.map(items =&gt; (
            &lt;tr&gt;
              &lt;td&gt;{items.name}&lt;/td&gt;
              &lt;td&gt;
                &lt;div&gt;
                  &lt;input type="checkbox" value="1" checked={true} /&gt;
                &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div&gt;
                  &lt;input type="checkbox" value="2" checked={false} /&gt;
                &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div&gt;
                  &lt;input type="checkbox" value="3" checked={false} /&gt;
                &lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          ))}
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/CkZjQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CkZjQ.png" alt="Component example"></a></p>