after deletion the UI re renders and getting all the check boxes - arrays

Question

The checkboxes and delete function working fine.. after the deletion the UI re renders and again im getting all the check boxes .. The marked checkboxes should not come again. Please suggest me how to stop this. I dont want the checked boxes in the UI after the delete button is clicked .
import React,{Component} from 'react';
import './UserList.css';
import jsonData from '../../people_(5).json';
const list = jsonData.People
const list2 = list.map(v => {
return {
...v,
value: false
}
})
list2.forEach((obj,index)=>obj.id=index)
class UserList extends Component{
state={
userList: list2
};
handleChange = e => {
console.log(this.state.userList)
const id = e.target.id;
this.setState(prevState => {
return {
userList: prevState.userList.map(
li => (li.id === +id ? {...li,
value: !li.value
} : li)
)
};
});
};
handleClick = () => {
console.log(this.state.userList)
this.setState(prevState => {
return {
userList: prevState.userList.filter(li => !li.value)
};
});
};
render(){
return(
<form className="pa4">
<fieldset id="people" className="del bn">
<legend className="fw7 mb2">People<button onClick={this.handleClick}>Delete</button></legend>
{this.state.userList.map(e => (
<div key={e.id}>
<input
type="checkbox"
id={e.id}
checked={e.value}
onChange={this.handleChange}
/>
<label htmlFor={e.name}>{e.name}</label>
</div>
))}
</fieldset>
</form>
);
}
}
export default UserList

Answer 1

I think the position that you put your button isn't correct.Every time click the button inside the form element will cause the page re-render,maybe you can change the button position like this
<div>
<form className="pa4">
<fieldset id="people" className="del bn">
...
</fieldset>
</form>
<button onClick={this.handleClick}>delete</button>
</div>
After the page re-render,people will be set to the initial value, so the handleChange actually doesn't work, then you can't delete the corresponding input element.

Answer 2

You Are not Updating the right values at the right place. Please check your logic in below code. You have un controlled checkboxes and also you are making changes to current state from prevState instead filter data by checkbox states
handleClick = () => {
console.log(this.state.userList)
this.setState(prevState => {
return {
userList: prevState.userList.filter(li => !li.value)
};
});
};