Search code examples
reactjsreact-dnd

DragDropContext is an invalid component

I'm trying to create a DragDropContext but failing.

var root = <CommentBox url="/metis/api/shifts" pollInterval={2000} />;

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

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

This gives...

ReactDOM.render(): Invalid component element. Instead of passing a class like Foo, pass React.createElement(Foo) or .

... in the console.

I thought that decorating a React object results in a new React object. So why doesn't the render method accept this object?

Solution

  • There is difference between React component and React element. In the docs of react-dnd, it is written that ReactDnD.DragDropContext returns a component (which means AppDnD is a component), but React.render expect an element as first parameter. So pass an element to render method like this

    ReactDOM.render(<AppDnD />, document.getElementById('content'));