Drag & Drop Error

[majerlazor]

Hi @piyush-eon

I'm trying to implement the drag & drop function, but after dropping the card, it's giving me this error: TypeError: Object(...) is not a function.

I only made changes to MainScreen & MyNotes. Hope you can look into this. Thanks for the great tutorial!

MainScreen.js

import React from 'react'
import { Droppable } from 'react-beautiful-dnd';
import { Container, Row } from 'react-bootstrap'
import "./MainScreen.css"

const MainScreen = ({ title, children}) => {
  return (
    <div className="mainback">
      <Droppable droppableId="tdl">
        {(provided) => (
          <Container>
            <Row>
              <div
                className="page"
                ref={provided.innerRef}
                {...provided.droppableProps}
              >
                {title && (
                  <>
                    <h1 className="heading">{title}</h1>
                    <hr />
                  </>
                )}
                {children}
              </div>
            </Row>
          </Container>
        )}
      </Droppable>
    </div>
  );
}

export default MainScreen

MyNotes.js

import MainScreen from "../../components/MainScreen";
import { Accordion, Badge, Button, Card } from "react-bootstrap";
import { Link, useHistory } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { deleteNoteAction, listNotes } from "../../actions/notesActions";
import Loading from "../../components/Loading";
import ErrorMessage from "../../components/ErrorMessage";
import ReactMarkdown from "react-markdown";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { noteListReducer } from "../../Reducer/notesReducers";
import { NOTES_LIST_REQUEST, NOTES_LIST_SUCCESS } from "../../constants/notesConstants";

const MyNotes = ({ search }) => {
  const dispatch = useDispatch();

  const noteList = useSelector((state) => state.noteList);
  const { loading, notes, error } = noteList;

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  const noteCreate = useSelector((state) => state.noteCreate);
  const { success: successCreate } = noteCreate;

  const noteUpdate = useSelector((state) => state.noteUpdate);
  const { success: successUpdate } = noteUpdate;

  const noteDelete = useSelector((state) => state.noteDelete);
  const {
    loading: loadingDelete,
    error: errorDelete,
    success: successDelete,
  } = noteDelete;

  const deleteHandler = (id) => {
    if (window.confirm("Are you sure")) {
      dispatch(deleteNoteAction(id));
    }
  };

  const history = useHistory();

  useEffect(() => {
    dispatch(listNotes());
    if (!userInfo) {
      history.push("/");
    }
  }, [
    dispatch,
    successCreate,
    history,
    userInfo,
    successUpdate,
    successDelete,
  ]);

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(notes);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    NOTES_LIST_SUCCESS(items);
  }

  return (
    <DragDropContext onDragEnd={handleOnDragEnd}>
      <MainScreen title={`Welcome Back ${userInfo.name}`}>
        <Link to="createnote">
          <Button style={{ marginLeft: 10, marginBottom: 6 }} size="lg">
            Create
          </Button>
        </Link>
        {errorDelete && (
          <ErrorMessage variant="danger">{errorDelete}</ErrorMessage>
        )}
        {error && <ErrorMessage variant="danger">{error}</ErrorMessage>}
        {loading && <Loading />}
        {notes
          ?.reverse()
          .filter((filteredNote) =>
            filteredNote.title.toLowerCase().includes(search.toLowerCase())
          )
          .map((note, index) => (
            <Accordion>
            <Draggable draggableId={note._id.toString()} index={index}>
              {(provided) => (
                <Card
                  style={{ margin: 10 }}
                  key={note._id}
                  index={index}
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                >
                  <Card.Header style={{ display: "flex" }}>
                    <span
                      style={{
                        color: "black",
                        textDecoration: "none",
                        flex: 1,
                        cursor: "pointer",
                        alignSelf: "center",
                        fontSize: 18,
                      }}
                    >
                      <Accordion.Toggle as={Card.Text} variant="link" eventKey="0">
                      {note.title}
                      </Accordion.Toggle>
                    </span>

                    <div>
                      <Button href={`/note/${note._id}`}>Edit</Button>
                      <Button
                        variant="danger"
                        className="mx-2"
                        onClick={() => deleteHandler(note._id)}
                      >
                        Delete
                      </Button>
                    </div>
                  </Card.Header>
                  <Accordion.Collapse eventKey="0">
                  <Card.Body>
                    <h4>
                      <Badge variant="success">
                        Category - {note.category}
                      </Badge>
                    </h4>

                    <blockquote className="blockquote mb-0">
                      <ReactMarkdown>{note.content}</ReactMarkdown>
                      <footer className="blockquote-footer">

                        Created on{" "}
                        <cite title="Source Title">
                          {note.createdAt.substring(0, 10)}
                        </cite>
                      </footer>
                    </blockquote>
                  </Card.Body>
                  </Accordion.Collapse>
                </Card>
              )}
            </Draggable>
            </Accordion>
          ))}
      </MainScreen>
    </DragDropContext>
  );
};

export default MyNotes;