Why am I not able to check/uncheck checkboxes? - reactjs

Question

I am not able to check/uncheck checkboxes, but their checkmark value is being populated by the api and either checking them or leaving them unchecked. But for some reason I am not able to check/uncheck.
Tried putting them into different components and using onClick/onChange. Nothing works.
Parent component - PublishPage:
<div id="all-roles">
{this.props.listOfRoles ? (
<ListOfRoles checkedIDs={this.state.roleIDs} roles={this.props.listOfRoles} /> ) : null}
</div>
List of Roles
export default class ListOfRoles extends Component {
state = {
checkedIDs : []
}
static getDerivedStateFromProps(props) {
let checkedIDs = null;
if (props.checkedIDs) {
checkedIDs = props.checkedIDs
}
return { checkedIDs: checkedIDs };
}
render() {
const roles = this.props.roles[0].roles;
console.log(this.state);
return (
<div id="assign-to-role">
{roles.map(role => {
return (
<div>
<RoleCheckbox roleName={role.roleName} roleID={role.roleID} checkedArray={this.state.checkedIDs} />
</div>
);
})}
</div>
);
}
}
RoleCheckbox
export default class RoleCheckbox extends Component {
constructor(props) {
super(props);
this.state = {
checkboxDefault: true
}
this.handleCheckbox = this.handleCheckbox.bind(this);
}
static getDerivedStateFromProps(props) {
let checked = true;
let roleID = props.roleID;
let checkedArray = props.checkedArray;
if (checkedArray.indexOf(roleID) !== -1) {
checked = true
} else {
checked = false;
}
return { checkboxDefault: checked };
}
handleCheckbox(e) {
this.setState({
[e.target.name]: !this.state[e.target.name]
})
}
render() {
return (
<div>
<label> {this.props.roleName}
<input
type="checkbox"
name="checkboxDefault"
onChange={this.handleCheckbox}
checked={this.state.checkboxDefault} />
</label>
</div>
)
}
}
I want to be able to check/uncheck and also I want to be able to load them as checked if the api says they should be checked.

Answer 1

Actually what's happening here is that you are injecting the HTML with the boolean value from this.state.checkboxDefault which is initialized default to true inside RoleCheckbox component and the function that handles the change is not effecting the state. Change the state and it will reflect on the UI as well
handleCheckbox(e) {
this.setState({
checkboxDefault: !this.state.checkboxDefault
})
}