Just a quick note, this specific question does not involve any asynchronous update problem (at least, as far as I can tell).
I currently have a class component with the following code snippet (simplified for clarity on the main issue):
constructor(props) {
super(props);
this.state = {
aSelected: false;
bSelected: false
}
}
handleCheckboxChange = (e) => {
const { checked, value } = e.target;
console.log( 'checked: ', checked );
if(value=="a") {
this.setState( {aSelected: checked}, () => {
console.log('aSelected: ', this.state.aSelected);
console.log("----")
});
}
if(value=="b") {
this.setState( {bSelected: checked}, () => {
console.log('bSelected: ', this.state.bSelected);
console.log("----")
});
}
}
Within the render return section, I've included the following:
<input>
type="checkbox"
value="a"
onChange={this.handleCheckboxChange}
checked={this.state.aSelected}
disabled={ (this.state.aSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
</input>
<input>
type="checkbox"
value="b"
onChange={this.handleCheckboxChange}
checked={this.state.bSelected}
disabled={ (this.state.bSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
</input>
The output recorded in Chrome Developer Tools displays how the "checked" status changes accordingly when selecting and deselecting checkboxes. Nevertheless, the state of "selected" (should be "aSelected") remains unaltered and retains its initial false value. Any insights into why "selected" (should be "aSelected") is not updating?
Edit: The task I'm aiming to achieve involves two checkbox items where the user can only choose ONE or none at all. If one is selected, the other should be disabled.