How to add multiple checkboxes to a state - reactjs

Question

How to save multiple checkboxes to a single state and add each checkbox to its previous state?
These are my states:
Operators : '',
TypeStatus : '',
RegistrationStatus : '',
This is my function:
changeHandle = (event) => {
this.setState({
[event.target.name]: event.target.value
});
};
This is my input:
I want to click on each of these checkboxes to add the value to the state
and add the RegisterButtonsActivated class to its parent label
<div className="container-fluid">
<div className="row flex-row-reverse">
<div className="col" data-toggle="buttons">
<label className="RegisterButtons">
<input
type="checkbox"
name="Operators"
id="MCI"
value="MCI"
checked={this.state.operations}
onChange={this.changeHandle}
onClick={this.props.handleFilterOperatorMCI}
/>
همراه اول
</label>
</div>
<div className="col" data-toggle="buttons">
<label className="RegisterButtons">
<input
type="checkbox"
name="Operators"
id="irancell"
value="irancell"
checked={true}
onChange={this.changeHandle}
onClick={this.props.handleFilterOperatorIrancell}
/>
ایرانسل
</label>
</div>
<div className="col" data-toggle="buttons">
<label className="RegisterButtons">
<input
type="checkbox"
name="Operators"
id="rightel"
value="rightel"
checked={this.state.operations}
onChange={this.changeHandle}
onClick={this.handleFilterOperatorRightel}
/>
رایتل
</label>
</div>
</div>
<div className="row justify-content-center">
<div className="col">
<hr className="hr-Filterbox" />
</div>
</div>
<div className="row flex-row-reverse">
<div className="col">
<label className={`RegisterButtons ${this.state.TypeStatus ===
"Justice" ? 'RegisterButtonsActivated' : ''}`}>
<input
type="checkbox"
name="TypeStatus"
id="Justice"
value="Justice"
onChange={this.changeHandle}
onClick={this.props.handleFilterTypeJustice}
/>
دائمی
</label>
</div>
<div className="col">
<label className={`RegisterButtons ${this.state.TypeStatus ===
"Credit" ? 'RegisterButtonsActivated' : ''}`}>
<input
type="checkbox"
name="TypeStatus"
id="Credit"
value="Credit"
onChange={this.changeHandle}
onClick={this.props.handleFilterTypeCredit}
/>
اعتباری
</label>
</div>
</div>
<div className="row justify-content-center">
<div className="col">
<hr className="hr-Filterbox" />
</div>
</div>
<div className="row flex-row-reverse">
<div className="col" data-toggle="buttons">
<label className={`RegisterButtons ${this.state.OperatingStatus
=== "New" ? 'RegisterButtonsActivated' : ''}`}>
<input
type="checkbox"
name="OperatingStatus"
id="New"
value="New"
onChange={this.changeHandle}
onClick={this.props.handleFilterWorkStatusNew}
/>
صفر
</label>
</div>
<div className="col" data-toggle="buttons">
<label className={`RegisterButtons ${this.state.OperatingStatus
=== "LowPerformance" ? 'RegisterButtonsActivated' : ''}`}>
<input
type="checkbox"
name="OperatingStatus"
id="LowPerformance"
value="LowPerformance"
onChange={this.changeHandle}
onClick={this.props.handleFilterWorkStatusOld}
/>
کم کارکرد
</label>
</div>
<div className="col" data-toggle="buttons">
<label className={`RegisterButtons ${this.state.OperatingStatus
=== "Old" ? 'RegisterButtonsActivated' : ''}`}>
<input
type="checkbox"
name="OperatingStatus"
id="Old"
value="Old"
onChange={this.changeHandle}
onClick={this.props.handleFilterWorkStatusLowPerformance}
/>
کارکرده
</label>
</div>
</div>
</div>
I want to click on each of these checkboxes to add the value to the state and add the RegisterButtonsActivated class to its parent label

Answer 1

You can do like this.....
this.state = {
checkboxes: {
Operators: null,
TypeStatus: null,
RegistrationStatus: null,
}
}
Below will handle the change in existing state and if you will pass new checkbox it will add new key to the state object.
changeHandle = (event) => {
this.setState((prevState) => ({
checkboxes: {...prevState.checkboxes, [event.target.name]: event.target.value }
}))
};

Answer 2

You can do this with your state;
this.state = {
checkboxes: {
Operators: {
currentValue: null,
previousValues:[]
},
TypeStatus: {
currentValue: null,
previousValues:[]
},
RegistrationStatus: {
currentValue: null,
previousValues:[]
},
}
}
Now your handler will look something like this;
changeHandle = (event) => {
const checkboxes = this.state.checkboxes;
checkboxes[event.target.name].currentValue = event.target.value;
checkboxes[event.target.name].previousValues.push(event.target.value); // last element will be the latest value.
this.setState({
checkboxes
});
};