I am not able to Change the value of checkbox from false to true onclick on checkbox the onchange is not getting called.
checkedbox should be changed to true whwn ever we clicked the checkbox
this.state = {
checkedbox: false,
}
render() {
<Checkbox
label="test"
value={checkedbox}
onChange={this.handelCheck}
/>
}
handelCheck = (event) => {
this.setState({
checkedbox: event.target.checked
});
}
You need to use this.state in value, try the following
value={this.state.checkedbox}
It depends how you're logging that state after you've changed it. setState provides a callback that you can use to do things after the async process has completed, like logging the new state.
Depending on whether you're using a library or rolling your own Checkbox component, checked rather than value for your component property is much more meaningful.
You should be passing in the checked state to your checked property, not a random variable called checked.
In this short example I've created my own Checkbox component to show you how it all fits together.
const { Component } = React;
class Example extends Component {
constructor() {
super();
this.state = { checked: false };
}
// Set the state, and the call the callback
// function to log the new state
handleChange = (e) => {
this.setState({ checked: e.target.checked }, () => {
console.log(this.state.checked);
});
}
render() {
return (
<div>
<Checkbox
label="test"
checked={this.state.checked}
handleChange={this.handleChange}
/>
</div>
);
}
};
class Checkbox extends Component {
render() {
const {
checked,
label,
handleChange
} = this.props;
return (
<fieldset>
<legend>{label}</legend>
<input
type="checkbox"
checked={checked}
onChange={handleChange}
/>
</fieldset>
)
}
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);input[type="checkbox"]:hover { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>