Unable to check and uncheck checkbox in reactjs - reactjs

Question

When i choose check in checkbox the value should be inserted in hobby array and when i unchecked the value should be removed from array
value is inserting and removing from array but i am not able to check and unchecked the checkbox visually. but in state it's working.
const ContactForm = () => {
const [state,setContact] = useState({
userId:"",
firstName:"",
lastName:"",
jobTitleName:"",
employeeCode:"",
emailAddress:"",
phoneNumber:"",
country:"",
status:"active",
hobbies:[]
})
const onChange = (event)=>{
setContact({...state,[event.target.name]: event.target.value});
}
e.preventDefault();
}
return (
<div className="form-group mb-2">
<label className="mb-0 font-weight-bold">Hobbies</label>
<div className="form-check">
<input type="checkbox" value="Basketball" onChange={(e)=>{
if(e.target.checked)
{
state.hobbies.push(e.target.value)
console.log(state.hobbies)
}else {
var index = state.hobbies.indexOf(e.target.value);
if (index > -1) {
state.hobbies.splice(index, 1);
console.log(state.hobbies)
}
}
}
}
/>
<label className="form-check-label">
Basketball
</label>
</div>
<div className="form-check">
<input type="checkbox" value="Vollyball" onChange={(e)=>{
if(e.target.checked)
{
state.hobbies.push(e.target.value)
console.log(state.hobbies)
}else {
var index = state.hobbies.indexOf(e.target.value);
if (index > -1) {
state.hobbies.splice(index, 1);
console.log(state.hobbies)
}
}
}
}
/>
<label className="form-check-label">
Vollyball
</label>
</div>
</div>
)

Answer 1

For your reference sample application
how to use multiple checkbox and adding multiple values.
const checkboxes = [
'Cricket', 'Footbal', 'Tennis'
];
class App extends Component {
state = {
checkedItems: new Map(),
}
handleChange=(e)=> {
const item = e.target.name;
const isChecked = e.target.checked;
this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
}
render() {
console.log(this.state.checkedItems)
return (
<>
{
checkboxes.map(item => (
<label key={item}>
{item}
<input type="checkbox"
checked={this.state.checkedItems.get(item)}
onChange={this.handleChange}
name={item}/>
</label>
))
}
</>
);
}
}

Answer 2

You are mutating state. Your updating state value witout useState's method setContact.
Please find working code here: https://codesandbox.io/s/great-diffie-giqgr
When you mutate state or change state value without useState method or setState it won't re-render component even though your state value is changed. You onChange should be like this.
if (e.target.checked) {
const newState = {
...state,
hobbies: [...state.hobbies, e.target.value]
};
setContact(newState);
console.log("** checked", newState);
// state.hobbies.push(e.target.value);
// console.log(state.hobbies);
} else {
const newState = {
...state,
hobbies: state.hobbies.filter(prev => prev !== e.target.value)
};
console.log("** unchecked", newState);
setContact(newState);
}