Hello, I'm new to React and I am facing an issue with checkbox click handling in React. My goal is to display a div when a checkbox is checked and hide the div when the checkbox is unchecked.
The current implementation only shows the div when the checkbox is clicked, but it does not remove the div when the checkbox is unchecked. How can I achieve this functionality in React?
class QuestionOverlay extends Component {
constructor() {
super();
this.showComments = this.showComments.bind(this);
this.state = {
showComponent: false,
};
}
showComments = (e) => {
this.setState({
showComponent: true,
});
}
render() {
return (
<div className="add_checkbox">
<span>Enable Comments</span>
<input className="checkbox" type="checkbox" name="enable_comment" onClick={this.showComments} value="enable_comment"/>
</div>
{this.state.showComponent ? <div className="comments_preview_sample"></div> : null}
)
}
}