Checkbox does not work well after resetting - reactjs

Question

I have a checkbox component, it works well when checking and unchecking. But if I reset, then select the checkbox again, it does not respond the click and only works after a few clicks. Sometimes it throws the error message "TypeError: this.setState is not a function". What is the problem here? Thanks.
App.js
const campusData = [
{ id: 1, value:'A',name: 'A' },
{ id: 2, value:'B',name: 'B' },
{ id: 3, value:'C',name: 'C' }
]
class App extends Component{
state={checkedCampusItems:[]};
onReset=()=>{
this.setState({checkedCampusItems:[]});
handleCampusChkChange=(id,name,value, checked)=> {
const checkedCampusItems = this.state.checkedCampusItems;
let index;
// check if the check box is checked or unchecked
if (checked) {
// add the numerical value of the checkbox to checkedItems array
checkedCampusItems.push(value);
} else {
index = checkedCampusItems.indexOf(value);
checkedCampusItems.splice(index, 1);
}
// update the state with the new array of options
this.setState({checkedCampusItems: checkedCampusItems });
console.log("checkedCampusItems array",checkedCampusItems);
}
render(){
return(<div><input type="reset" value="Reset Search" onClick={this.onReset}></input>
{campusData.map(item =>
<CampusChk id="campus" key={item.id} {...item} onChange={this.handleCampusChkChange} />
)}
</div>
)
}
}
export default App;
campusChk.js
import React from 'react';
const CampusChk = ({ id, name,value, onChange }) => {
return(
<div>
<input
type="checkbox"
onChange={(event) => onChange(id,name,value, event.target.checked) }
/>
<label>{name}</label>
</div>
);
}
export default CampusChk;

Answer 1

Change your reset function to update the state:
onReset=()=>{
this.setState({ checkedCampusItems: []})
}
You're also mutating state. This may not be causing the problem, but you should change your temporary array to this in your change handler:
const checkedCampusItems = [...this.state.checkedCampusItems];