Ad

Can Someone Help Me Convert An Codepen Into An React Sandbox Fiddle?

- 1 answer

I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.

I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors. Also the files in my own project are .tsx and not .js.

My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.

Can someone help me with converting this codepen into a react sandbox without errors?

Ad

Answer

I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:

import ReactDnD from "react-dnd";

Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:

import * as ReactDnD from "react-dnd";

I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.


Helpful information:

Ad
source: stackoverflow.com
Ad