How to select only one checkbox in a group using reactjs component

Question

I have multiple category each category contains multiple checkbox, for which I want only 1 checkbox to be checked in every category at a time using React js. This is what i want

onlyOne(event) {
    console.log("==",event.target.value)
    var checkboxes = document.getElementsByName('check')
    console.log("cheek",checkboxes);
    checkboxes.forEach((item) => {
      if (item !== event.target.name) item.checked = false
    })

}

HTML:

       <div>
        <label>RBA CONFIGURATION SCREEN </label><br/>               
        View  <input type="checkbox" name="check" value="0" onClick={this.onlyOne.bind(this)} checked=''/>
        Manage  <input type="checkbox" name="check" value="1" onClick={this.onlyOne.bind(this)} checked='' />
        Edit  <input type="checkbox" name="check" value="2" onClick={this.onlyOne.bind(this)} checked='' />
        </div>

Looking something like this in Reactjs https://stackoverflow.com/a/37002762

Radio button can't be used because the user should be able to un-check the selection

Answer 1

I suggest switching to radio for your case.

Answer to your question:

 // amount of checkboxes const n = 3; class Example extends React.Component { constructor() { super(); this.state = { // checked/unchecked is stored here // initially the first one is checked: // [true, false, false] checkboxes: new Array(n).fill().map((_, i) => !i), }; } onChange(e, changedIndex) { // it is a good habit to extract things from event variable const { checked } = e.target; this.setState(state => ({ // this lets you unselect all. // but selected can be anly one at a time checkboxes: state.checkboxes.map((_, i) => i === changedIndex ? checked : false), })); } render() { const { checkboxes } = this.state; return ( <div> {checkboxes.map((item, i) => ( <input key={i} type="checkbox" checked={item} onChange={e => this.onChange(e, i) /* notice passing an index. we will use it */} /> ))} </div> ); } } ReactDOM.render(<Example />, document.querySelector('#root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>