title: React - problems with checkbox
body: <p>I am trying to create a component with four options. The user is supposed to choose only one option. So if the user chooses another option, the previosluy selected ones should change to false. This is my code:</p>
  <pre><code>
  const riddles_ = [{
      id:2,
      options: ['A grandson','A daughter','A father','A nephew'],
      state_: [false,false,false,false]
      }]
  
  function toggleToDo(o){ 
          riddles_.state_ = [false,false,false,false]
          riddles_.state_[o] = true
          console.log(riddles_.state_)
      }
  
      return (
          &lt;div&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; checked={riddles_.state_[0]} onClick={(o)=&gt;toggleToDo(0)}/&gt;
              {riddles_.options[0]}
              &lt;div className='space'&gt;&lt;/div&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;check2&quot; checked={riddles_.state_[1]} onClick={(o)=&gt;toggleToDo(1)}/&gt;
              {riddles_.options[1]}
              &lt;div className='space'&gt;&lt;/div&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;check3&quot; checked={riddles_.state_[2]} onClick={(o)=&gt;toggleToDo(2)}/&gt;
              {riddles_.options[2]}
              &lt;div className='space'&gt;&lt;/div&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;check4&quot; checked={riddles_.state_[3]} onClick={(o)=&gt;toggleToDo(3)}/&gt;
              {riddles_.options[3]}
          &lt;/div&gt;
      )
  }
  
  </code></pre>
  <p>When the user clicks on a checkbox, it just turns true or false, and generates no change in the others. I know the riddles_.state_ array is changing but the checkbox don´t seem to be able to take its value.</p>