Drag and Drop API with React not dropping or returning id

Question

I'm following this tutorial and I'm having trouble with the onDragStart and onDragOver not returning and information. More context, I'm making a sticky note type app.

  onDragStart = (e, id) => {
    e.dataTransfer.setData("id", id);
  };

  onDragOver = (e) => {
    e.preventDefault();
  };

  onDrop = (e, sect) => {
    let id = e.dataTransfer.setData("id", e.target.id);

    let notes = this.state.notes.filter((note) => {
      console.log(id);
      if (note.key == id) {
        note.section = sect;
      }
      return note;
    });

    this.setState({
      ...this.state,
      notes,
    });
  };

This is the code I used that is not working properly. I can drag the notes but they don't drop. I believe this is because variable id is undefined for some reason. For example, if I removed the (note.key == id) the notes would drop correctly into place (but every note would and not the specific one I want).

As for the Sticky notes and droppable area, here is the code.

this.state.notes.forEach((n) => {
      sections[n.section].push(
        <Sticky
          key={n.key}
          onDragStart={(e) => this.onDragStart(e, n.key)}
          id={n.key}
          text={n.text}
        />
      );
    });

    return (
      <div className="App">
        <div className="container-drag">
          <h2 className="header">General</h2>
          <div
            id="general"
            className="droppable"
            onDragOver={(e) => this.onDragOver(e)}
            onDrop={(e) => {
              this.onDrop(e, "general");
            }}
          >
            {sections.general}
          </div>
        </div>
        <div className="container-drag">
          <h2 className="header">Todo</h2>
          <div
            id="todo"
            className="droppable"
            onDragOver={(e) => this.onDragOver(e)}
            onDrop={(e) => {
              this.onDrop(e, "todo");
            }}
          >
            {sections.todo}
          </div>
        </div>
      </div>
    );
  }

And the sticky component is simply

      <div id={this.props.id} className="draggable" draggable>
        <p>{this.props.text}</p>
      </div>

I don't think the problem is with the state so I'll leave that out, it is just an array of objects. In addition, I've tried using text instead of id but I was a bit confused so maybe I did something incorrectly. Basically, I've tried console.logging everything individually with no success. I'm not sure the problem but I found that copy-pasting the tutorials code made it work perfectly (but I still wanted my own take of it, with separate components).

Hopefully I can find a solution and I appreciate any help or tips.

Answer 1

I solved the problem.

 onDragStart = (e, id) => {
    e.dataTransfer.setData("id", id); //in brackets should be ("text/plain", id) and in the .getData below it should be (text", id)
  };

  onDragOver = (e) => {
    e.preventDefault();
  };

  onDrop = (e, sect) => {
    let id = e.dataTransfer.setData("id", e.target.id); //this shoud be .getData not .setData

And finally,

<Sticky
          key={n.key}
          onDragStart={(e) => this.onDragStart(e, n.key)}
          id={n.key}
          text={n.text}
        />

The onDragStart was being passed as a property not an actual function, I solved this by changing it to a