React - Deselecting the checkbox doesn't make div to dissapear - html

Question

I'm currently messing around with Reactjs and don't know where exactly my problem lays. I wan't to render an input field if a certain chekbox is selected (requiredRoleResponsible in this case). If i check it first time to true it works fine, but if I deselect it, it won't disappear. Maybe i missing something?
class ProccessForm extends React.Component {
constructor(props) {
super(props)
this.state = { name: '', description: '', requireSupervisor: false, requireRoleResponsible: false, roleResponsible: '' }
this.handleNameChange = this.handleNameChange.bind(this);
this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
this.handleSupervisorCheckbox = this.handleSupervisorCheckbox.bind(this);
this.handleRoleResponsibleCheckbox = this.handleRoleResponsibleCheckbox.bind(this);
this.handleRoleResponsibleChange = this.handleRoleResponsibleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e, data) {
e.preventDefault();
const name = this.state.name.trim();
const description = this.state.description.trim();
if (!name || !description)
return;
this.props.onProcessSubmit({ name: name, description: description });
this.setState({ name: '', description: '' });
}
handleSupervisorCheckbox(e) {
this.setState({requireSupervisor: Boolean(e.target.value)});
}
handleRoleResponsibleCheckbox(e) {
this.setState({requireRoleResponsible: Boolean(e.target.value)});
}
handleRoleResponsibleChange(e) {
this.setState({roleResponsible: e.target.value});
}
handleNameChange(e) {
this.setState({ name: e.target.value })
}
handleDescriptionChange(e) {
this.setState({ description: e.target.value })
}
render() {
return (
<div className="panel-body">
<form className="processForm" onSubmit={this.handleSubmit}>
<div className="form-group">
<label htmlFor="inputName">Name</label>
<input className="form-control" id="inputName" type="text" placeholder="Prozessname" value={this.state.name} onChange={this.handleNameChange} />
</div>
<div className="form-group">
<label htmlFor="inputDescription">Beschreibung</label>
<textarea className="form-control" id="inputDescription" type="text" placeholder="Prozessbeschreibung" value={this.state.description} onChange={this.handleDescriptionChange} />
</div>
<span>Welche Genehmigungen werden benötigt?</span>
<div className="checkbox">
<label><input type="checkbox" value={this.state.requireSupervisor} onChange={this.handleRoleResponsibleCheckbox}/>Vorgesetzer</label>
</div>
<div className="checkbox">
<label><input type="checkbox" value={this.state.requireRoleResponsible} onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>
</div>
{this.state.requireRoleResponsible ?
<div className="form-group">
<label htmlFor="inputRoleResp">Name</label>
<input className="form-control" id="inputRoleResp" type="text" placeholder="Rollenverantwortlicher" value={this.state.roleResponsible} onChange={this.handleRoleResponsibleChange} />
</div> : null}
<div>
<input type="submit" value="erstellen" />
</div>
</form>
</div>
);
}
}
I tried different approaches I seen online so far. Making the second part of the if to null like currently in my code. Just to use this.state.requireRoleResponsible && the to render part and in the handler to make explicitely a boolean out of the value
Thanks for your help

Answer 1

For checkbox you need to use checked instead of value.
Checked will determined if the checkbox is checked or not. Value is just a property to hold.
In this case you need to change:
<input type="checkbox" value={this.state.requireRoleResponsible}
onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>
To:
<input type="checkbox" checked={this.state.requireRoleResponsible}
onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>
And change the handler to:
handleRoleResponsibleCheckbox(e) {
this.setState({requireRoleResponsible: e.target.checked});
}

Answer 2

With checkbox you should use checked instead of value ( should use value attr for type: text , select , ... )
And in 2 function handler for your checkbox , i think you can use like this :
handleRoleResponsibleCheckbox(e) {
//this.setState({requireRoleResponsible: Boolean(e.target.value)});
this.setState((prevState)=>{
return {
requireRoleResponsible: !prevState.requireRoleResponsible
}
})
}
with prevState is current state before you update