gistfile1.txt

public render(): JSX.Element {
        const { label, onSkeletonSubmit } = this.props;
        const isSkeleton = !!onSkeletonSubmit;

        return (
            <Form
                initialValues={{
                    name: label?.name || '',
                    type: label?.type || (isSkeleton ? LabelType.SKELETON : LabelType.ANY),
                    color: label?.color || undefined,
                    attributes: (label?.attributes || []).map((attr) => ({
                        id: attr.id,
                        name: attr.name,
                        type: attr.input_type,
                        values: attr.values,
                        mutable: attr.mutable,
                        default_value: attr.default_value,
                    })),
                }}
                onFinish={this.handleSubmit}
                layout='vertical'
                ref={this.formRef}
            >
                <Row justify='start' align='top'>
                    <Col span={8}>{this.renderLabelNameInput()}</Col>
                    <Col span={3} offset={1}>{this.renderLabelTypeInput()}</Col>
                    <Col span={3} offset={1}>
                        {this.renderChangeColorButton()}
                    </Col>
                    <Col offset={1}>
                        {this.renderNewAttributeButton()}
                    </Col>
                </Row>
                <Row justify='start' align='top'>
                    <Col span={24}>
                        {/* <Form.List name='attributes'>{this.renderAttributes()}</Form.List> */}
                        <ReactGridLayout
                            className='layout'
                            rowHeight={30}
                            draggableHandle='.react-grid-dragHandleExample'
                        >
                            <div
                                key='1'
                                data-grid={{
                                    x: 0, y: 0, w: 12, h: 2,
                                }}
                            >
                                <span className='text'>1</span>
                                <hr />
                                <hr />
                                <span className='react-grid-dragHandleExample'>[DRAG HERE]</span>
                                <hr />
                                <hr />
                            </div>
                            <div
                                key='2'
                                data-grid={{
                                    x: 0, y: 2, w: 12, h: 2,
                                }}
                            >
                                <span className='text'>2 - Static</span>
                                <hr />
                                <hr />
                                <span className='react-grid-dragHandleExample'>[DRAG HERE]</span>
                                <hr />
                                <hr />
                            </div>
                            <div
                                key='3'
                                data-grid={{
                                    x: 0, y: 4, w: 12, h: 2,
                                }}
                            >
                                <span className='text'>3</span>
                                <hr />
                                <hr />
                                <span className='react-grid-dragHandleExample'>[DRAG HERE]</span>
                                <hr />
                                <hr />
                            </div>
                            <div
                                key='4'
                                data-grid={{
                                    x: 0,
                                    y: 6,
                                    w: 12,
                                    h: 2,
                                }}
                            >
                                <span className='text'>
                                    4 - Draggable with Handle
                                    <span className='react-grid-dragHandleExample'>[DRAG HERE]</span>
                                </span>
                            </div>
                            <Form.List name='attributes'>{this.renderAttributes()}</Form.List>  // was not returning anything
                        </ReactGridLayout>
                    </Col>
                </Row>
                <Row justify='start' align='middle'>
                    <Col>{this.renderSaveButton()}</Col>
                    <Col offset={1}>{this.renderCancelButton()}</Col>
                </Row>
            </Form>
        );
    }

private renderAttributes() {
        return (fieldInstances: any[]): (JSX.Element | null)[] => {
            console.log('fieldInstances:', fieldInstances); // Logging fieldInstances
//          It wasn't able to log anything when called from inside <ReactGridLayout>
            return fieldInstances.map(this.renderAttribute);
        };
    }


private renderAttribute = (fieldInstance: any): JSX.Element | null => {
        console.log('hi');
        const { key } = fieldInstance;
        const attr = this.formRef.current?.getFieldValue('attributes')[key];

        return attr ? (
            <div
                key='6'
                data-grid={{
                    x: 0, y: 0, w: 12, h: 2,
                }}
            >
                <Form.Item noStyle key={key} shouldUpdate>
                    {() => (
                        <Row
                            justify='space-between'
                            align='top'
                            cvat-attribute-id={attr.id}
                            className='cvat-attribute-inputs-wrapper'
                        >
                            <Col span={1}>{this.renderUpIcon(fieldInstance)}</Col>
                            <Col span={1}>{this.renderDownIcon(fieldInstance)}</Col>
                            <Col span={5}>{this.renderAttributeNameInput(fieldInstance, attr)}</Col>
                            <Col span={4}>{this.renderAttributeTypeInput(fieldInstance, attr)}</Col>
                            <Col span={6}>
                                {((): JSX.Element => {
                                    const currentFieldValue = this.formRef.current?.getFieldValue('attributes')[key];
                                    const type = currentFieldValue.type || AttributeType.SELECT;
                                    let element = null;
                                    if ([AttributeType.SELECT, AttributeType.RADIO].includes(type)) {
                                        element = this.renderAttributeValuesInput(fieldInstance, attr);
                                    } else if (type === AttributeType.CHECKBOX) {
                                        element = this.renderBooleanValueInput(fieldInstance);
                                    } else if (type === AttributeType.NUMBER) {
                                        element = this.renderNumberRangeInput(fieldInstance, attr);
                                    } else {
                                        element = this.renderDefaultValueInput(fieldInstance);
                                    }

                                    return element;
                                })()}
                            </Col>
                            <Col span={5}>{this.renderMutableAttributeInput(fieldInstance, attr)}</Col>
                            <Col span={2}>{this.renderDeleteAttributeButton(fieldInstance, attr)}</Col>
                        </Row>
                    )}
                </Form.Item>
            </div>
        ) : null;
    };