mardi 22 octobre 2019

Antd design Checkbox.Group issue

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