I'm a beginner with react and currently, I am trying to learn how to make the rows draggable and rearrangeable. I am using the react-beautiful-dnd library. I was able to make the rows draggable but I am getting an error:
react_devtools_backend.js:4026 react-beautiful-dndA setup problem was encountered.> Invariant failed: A Droppable requires a [string] droppableId. Provided: [object]
When I change the AWOS to a string, it doesn't let me drag the objects, however. This error reads: Invariant failed: Cannot find droppable entry with id [AWOS]
Any help would be greatly appreciated.
import React, {Component} from "react";
import {Col, Container, Row, } from "react-bootstrap";
import axios from "axios";
import {Link} from "react-router-dom";
import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
export class TestScreen extends Component {
constructor(props) {
super(props);
this.state = {
// Active Work Orders clients
AWOS: [],
}
}
componentDidMount() {
axios.get(['http://127.0.0.1:8000/api/clients/',
], {
headers: {
"Accept": 'application/json',
"Content-Type": 'application/json'
},
})
.then(response => {
this.setState({
AWOS: response.data
});
})
}
onDragEnd = e => {
console.log(e);
if (!e.destination) {
return;
}
const { AWOS } = this.state;
const sorted = this.reorder(AWOS, e.source.index, e.destination.index);
console.log(sorted);
this.setState({
AWOS: sorted
});
};
reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
render() {
const {AWOS} = this.state;
let test = AWOS.work_site_address
console.log(test)
return (
<Container fluid>
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId={'AWOS'}>
{(provided) => (
<div
className={AWOS}
{...provided.droppableProps}
ref={provided.innerRef}
>
{AWOS.map((awo, index) =>
<Draggable
key={awo.work_site_address}
draggableId={awo.work_site_address}
index={index}
>
{(provided) => (
<Row
className={"workOrderRow"}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<Col>
<Link className={'btn btn-primary'}
to={`/client_details/${awo.id}/`}>
{awo.work_site_address}
</Link>
</Col>
</Row>
)}
</Draggable>
)}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</Container>
);
}
}
export default TestScreen;