When React dnd implements drag and drop, how to add moving content in the target box?

problem description

how do I add moving content to the target box when using React dnd to implement drag and drop?

related codes

Container.js

<Source name={item.name} key={item.id} id={item.id} index={index} icon={item.icon} />

Source.js

return (
  connectDragSource(
    <div className="app-source" style={style}>
      {name}
      <i className={"iconfont " + icon}></i>
    </div>
  )
  

Target.js

return connectDropTarget(
        // style={style}
        <div className="app-target">
            {isActive ?
                "Hummmm, source!" : 
                "Drag here to order!"
            }
        </div>
    )

figure

clipboard.png

later

I have read the React dnd document for two days, but I still don"t know how to add mobile content to the target box. Who knows, thank you ~

Mar.28,2021

you need to change your mind. The content added on the right side of
should be the data in state , not the content on the left.
that is, the object being dragged (on the left) and the target of the drag and drop (on the right) are two different state data.
then you can assume that the left object is state.origin = [] , and the right object is state.dest = [] .
when you drag from the left to the right, add a state.origin object to the state.dest .

Menu