React beautiful drag and drop setup problem encountered

Viewed 19

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;
0 Answers
Related