How can I have only one checkbox checked out of two? - reactjs

Question

I've got two checkboxes and I need to have only one of them true at the time.
So if checkbox1 is true then checkbox2 should be false.
My current code works only when I play around with first checkbox but the second one doesn't behave correctly.
Here are my checkboxes:
<Checkbox
checked={checkbox1}
onChange={onChange}
/>
<Checkbox
checked={checkbox2}
onChange={onChange}
/>
My CheckBox component:
<input
type="checkbox"
className="filled-in"
checked={this.state.checked}
data-cy={this.props.cyCheckbox}
/>
And my parent component where I am trying to manipulate state to set CheckBox checked true or false:
<Access
checkbox1={this.state.input.checkbox1}
checkbox2={this.state.input.checkbox2}
onChange={this.updateInput}
/>;
state = {
input:{
checkbox1: false,
checkbox2: false,
}
}
updateInput = (key, value) => {
let { input } = this.state;
input[key] = value;
this.setState({ input });
window.input = input;
//this is where I try to set another Checkbox false if first one is true.
if (input.checkbox1) {
input.checkbox2= false;
} else if (input.checkbox2) {
input.checkbox1= false;
} else {
input.checkbox2= true;
input.checkbox1= true;
}
}

Answer 1

I can't be sure because your examples are incomplete, but I think your issue is that your checkbox code can never reach the else if clause unless the first checkbox is already unchecked. Make your conditionals based on key and value and you'll be fine. Something like:
if (key === 'checkbox1' && value) {
input.checkbox1 = true;
input.checkbox2 = false;
} else if (key === 'checkbox2' && value) {
input.checkbox1 = false;
input.checkbox2 = true;
}