antd-dynamic-checkbox.md

import React, { useState } from 'react';
import {Form, Row, Col, Input, Button, Switch, } from 'antd'
const { TextArea } = Input;
const DynamicCheckbox = () => {

    // States
    const [form] = Form.useForm()
    const [selectedBox, setSelectedBox] = useState(null)
    const PaymentInfo = Form.useWatch('payment_information', form);

    // On Submit
    const _onSubmit = (values) => {
        console.log(values)
    }

    const _onChecked = (value) => {
        // Set Initial Value `false`
        const defaultChecked = PaymentInfo.map((method, i) => {
            return (
                {
                    key: i,
                    ...method,
                    is_default: false
                }
            )
        })
        // Set Selected Value `true`
        defaultChecked[value]['is_default'] = true;

        console.log(defaultChecked, 'update')
        setSelectedBox(value)
    }

    return (
        <div style={{width: '500px', margin: '0 auto'}}>
            <Form
                form={form}
                onFinish={_onSubmit}
                layout='vertical'
            >
                <Form.List name='payment_information'>
                    {(fields, {add, remove}) => (
                        <>
                        {fields.map((field, index) => (
                            <Row gutter={[32, 32]} key={field.key}>
                                <Col span={12}>
                                    <Form.Item
                                        {...field}
                                        name={[field.name, 'payment_method']}
                                        label='Payment Method'
                                    >
                                        <Input placeholder='Payment Method'/>
                                    </Form.Item>
                                </Col>

                                <Col span={12}>
                                    <Form.Item
                                        {...field}
                                        name={[field.name, 'payment_information']}
                                        label='Payment Information'
                                    >
                                        <TextArea placeholder='Payment Information'/>
                                    </Form.Item>
                                </Col>

                                {/* Checkbox */}
                                <Col span={12}>
                                    <Form.Item
                                        {...field}
                                        name={[field.name, 'is_default']}
                                        label='Default Payment Method'
                                        // valuePropName="checked"
                                        
                                    >   
                                        
                                        <Switch checked={selectedBox === index? true : false}  onClick={() => _onChecked(index)}/>
                                        
                                    </Form.Item>
                                </Col>

                                {/* Remove Button */}
                                <Col span={24}>
                                    <Form.Item>
                                        <Button
                                            type='primary' 
                                            danger
                                            onClick={() => {remove(field.name)}}
                                        >
                                        Remove
                                        </Button>
                                    </Form.Item>
                                </Col>           
                            </Row> 
                        ))}
                            <Form.Item>
                                <Button
                                    type="primary"
                                    onClick={() => {add()}}
                                    >
                                Add
                                </Button>
                            </Form.Item>                        
                        </>
                    )}
                </Form.List>   
                <Button htmlType='submit'>Submit</Button>
            </Form>
        </div>
    );
};

export default DynamicCheckbox;