I am facing an issue of implementing Draggable row using react-draggable-tag library and ant design. Currently the onChange inside of the "Option" tag (ant-design component) is causing an inifinite loop.
I am doing that onChange in an attempt to update the Return property inside of initialTags state. So that when the user submit the Modal (ant design component), the i will be able to call the update axios api and input the information using initialTag's return property. However,currently it does not work.
Any help will be appreciated !! because i am stuck for a few days now.
import statement:
import {
Button,
Modal,
Col,
Row,
Select
} from 'antd';
import { DraggableAreasGroup } from 'react-draggable-tags';
const group = new DraggableAreasGroup();
const DraggableArea = group.addArea();
const { Option } = Select;
class component constructor:
export default class flowSeq extends React.Component {
constructor(props) {
super(props);
this.state = {
initialTags: []
...
Javascript code with draggable-tag library and ant design:
<Modal
destroyOnClose={true}
width={'40%'}
title='Approval Sequence'
visible={this.state.isModalVisible}
onOk={() => {
updateFlow(
... axios api update (still trying to implement)....
),
})
.then((r) => {
notification['success']({
message: 'Success',
description: 'Save successfully',
});
this.setState({ isModalVisible: false });
this.getData();
})
.catch(() => {
notification['error']({
message: 'Error',
description: 'Save failed',
});
});
}}
onCancel={() => {
this.setState({ isModalVisible: false });
}}
>
<Row gutter={[2, 2]}>
<Col style={{ textAlign: 'left' }} span={8}>
<Text strong>Departments</Text>
</Col>
<Col style={{ textAlign: 'left' }} span={8}>
<Text strong> Return to Department: </Text>
</Col>
</Row>
<DraggableArea
onChange={(initialTags) => this.setState({ initialTags })}
isList
tags={this.state.initialTags}
render={({ tag }) => (
<Row>
<Col span={8}>
<Button style={{ width: '100%' }}>{tag.name}</Button>
</Col>
<Col span={16}>
<Select
placeholder="Select a location to Return Flow"
style={{ width: '100%' }}
>
{this.getReturnDropdown(tag.name).map((tagName) => (
<Option
onChange={
this.setState(prevState => ({
initialTags: prevState.initialTags.map(eachItem =>
eachItem.name === tag.name
? { ...eachItem, return: tagName.name }
: eachItem)
}))
}
value={tagName.name}>{tagName.name}
</Option>
))}
</Select>
</Col>
</Row>
)}
></DraggableArea>
</Modal>
Array of objects for initialTags:
[
{
"name": "AQS",
"projectId": "1",
"projectName": proj1,
"return":[]
},
{
"name": "ED",
"projectId": 2,
"projectName": proj2,
"return":[]
},
{
"name": "PAID",
"projectId": 3,
"projectName": proj3,
"return":[]
},
{
"name": "QS",
"projectId": 4,
"projectName": proj4,
"return":[]
}
]
Error Message in console
The Modal does not open up and code goes into inifinite looping.
