How to refactor and simplify a Drag-And-Drop code into smaller chunks

Question

I created a prototype drag & drop functional component using react-beautiful-dnd. However, I am not so happy with the length of the code (like 250) lines and I think it should be better breakable.

Please find this example under this sandbox. I would like to hear your re-factoring advice how I can split the "right column" into a separate functional component, what kind of props and events need to be carried and how ??

Thanks in advance. Geo

Answer 1

OK, I will answer my own question for the sake of completeness and backward-reference :)

I was actually thinking that it would be needed to provide any DrapDropContext parameters in the split functional components: NOT NECESSARY.

The main point is to be able to carry the data object and integrity between these "outsourced components" and using a context was the solution for that. DrapDropContext was simply taking care of any behavioural details on the events.

Thanks for reading anyways. Geo