2

Given the following....

var root2 = <div />;

var AppDnD = ReactDnD.DragDropContext(ReactDnDMultiBackend.default(RDMBHTML5toTouch.default))(root2);

ReactDOM.render(root2, document.getElementById('content'));

I get...

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of DragDropContext(Component).

and...

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of DragDropContext(Component)

The null mentioned in the warning seems to be a result of the following generated code...

React.createElement(AppDnD, null)

How do I fix this?

When did Javascript get so sophisticated?

Libraries are basic...

   <script src="~/lib/ReactDnD.min.js"></script>
    <script src="~/lib/ReactDnDMultiBackend.min.js"></script>
    <script src="~/lib/RDMBHTML5toTouch.min.js"></script>
Ian Warburton
  • 15,170
  • 23
  • 107
  • 189

1 Answers1

1

DragDropContext wants a component rather than an element.

Thus, for example, given...

class MyComponent extends React.Component {

    render() {

        return (<div />);
    }
};

Instead of...

var root2 = <MyComponent/>;

var AppDnD = ReactDnD.DragDropContext(ReactDnDMultiBackend.default(RDMBHTML5toTouch.default))(root2);

ReactDOM.render(root2, document.getElementById('content'));

... one does...

var AppDnD = ReactDnD.DragDropContext(ReactDnDMultiBackend.default(RDMBHTML5toTouch.default))(MyComponent);

ReactDOM.render(<AppDnD />, document.getElementById('content'));
Ian Warburton
  • 15,170
  • 23
  • 107
  • 189