react-beautiful-dnd icon indicating copy to clipboard operation
react-beautiful-dnd copied to clipboard

ReferenceError: Element is not defined

Open mzcoder-hub opened this issue 2 years ago • 3 comments

i got an error when it come to refresh but if its not a refresh it no error message

this is the gif that i do a testing

https://media.discordapp.net/attachments/988291985620234270/990207878889603092/Animation.gif?width=720&height=368

any suggestion about that ? the code of mine is

` handleDrop = (droppedItem) => { // Ignore drop outside droppable container if (!droppedItem.destination) return;

  var updatedList = [...this.state.dragNdropData];
  // Remove dragged item
  const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
  // Add dropped item
  updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
  // Update State
  this.setState({
    dragNdropData : updatedList,
  });

};

`

this is the component that i call for

{this.state.dragNdropData.length === 0 ? (
                        <div className="list-container">
                          <div className="item-container">
                              <Row>
                                <Col md="1" className='text-center'><i className="fa fa-bars"></i></Col>
                                <Col md="9">No Data Yet</Col>
                                <Col md="2" className='text-center'><ButtonDelete /></Col>
                              </Row>
                          </div>
                        </div>
                    ): 
                        <DragDropContext onDragEnd={this.handleDrop}>
                            <Droppable droppableId="list-container">
                            {(provided) => (
                                <div className="list-container" {...provided.droppableProps} ref={provided.innerRef}>
                                {this.state.dragNdropData.map((item, index) => (
                                      <Draggable key={item.id} draggableId={"list-container-"+item.id} index={index}>
                                              {(provided) => (
                                                  <div className="item-container" ref={provided.innerRef} {...provided.dragHandleProps} {...provided.draggableProps} >
                                                      <Row>
                                                        <Col md="1" className='text-center'><i className="fa fa-bars"></i></Col>
                                                        <Col md="9">{item.name}</Col>
                                                        <Col md="2" className='text-center'><ButtonDelete onClick={() => this.onDelete(item.id)} /></Col>
                                                      </Row>
                                                  </div>
                                              )}
                                      </Draggable>
                                    ))}
                                    {provided.placeholder}
                                </div>
                            )}
                            </Droppable>
                        </DragDropContext>
                 }

mzcoder-hub avatar Jun 25 '22 10:06 mzcoder-hub

for more information of technology I'm using nextjs version 10.0.6 still error until now I don't know what's the problem is

mzcoder-hub avatar Jun 29 '22 04:06 mzcoder-hub

@mzcoder-hub , did you manage to solve the issue? I having the same thing

roibWix avatar Sep 20 '22 11:09 roibWix

@mzcoder-hub , did you manage to solve the issue? I having the same thing

Not yet still waiting

mzcoder-hub avatar Sep 20 '22 11:09 mzcoder-hub