I am trying to implement Checkbox using antd design . Checkbox values I am getting from backend as mentioned below.
Checkboxes are not displaying on first load and it reproduces the checkboxes each time clicked on 'Check all'. Can someone please suggest what I'm doing wrong here?
subscribe: {
isLoading: false,
allSubscribers: [
{
subscribe_email: 'test1@test.com'
},
{
subscribe_email: 'test11@test.com'
}
]
}
what I have done so far
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const plainOptions = [];
const defaultCheckedList = [];
class customeForm extends Component {
componentDidMount() {
// this will load data from backend
this.props.getAllEmailSubscribers();
}
state = {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
onChange = checkedList => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
});
};
onCheckAllChange = e => {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
};
render() {
this.props.emailUsers && this.props.emailUsers.allSubscribers && this.props.emailUsers.allSubscribers.map(result =>
plainOptions.push(result.subscribe_email),
)
return (
<React.Fragment>
<Form onSubmit={this.handleSubmit}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
<CheckboxGroup
options={plainOptions}
value={this.state.checkedList}
onChange={this.onChange}
/>
<Button type="primary" htmlType="submit">
Send Newsletter
</Button>
</Form>
</React.Fragment >
)
}
}
const WrappedcustomeForm = Form.create()(customeForm);
const mapStateToProps = state => ({
emailUsers: state.subscribe
});
export default connect(
mapStateToProps,
{ getAllEmailSubscribers}
)(WrappedcustomeForm );
Aucun commentaire:
Enregistrer un commentaire