0

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?

Ian Warburton
  • 15,170
  • 23
  • 107
  • 189

1 Answers1

2

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'));

Prakash Sharma
  • 15,542
  • 6
  • 30
  • 37
  • Yes, that works. But I need to use a `DragDropContext` don't I? – Ian Warburton Dec 05 '17 at 17:26
  • @IanWarburton I am not sure what do you mean. The docs says that `DragDropContext` returns a wrapped `component`. It does not say element. So you cant directly pass it to render method – Prakash Sharma Dec 05 '17 at 17:33
  • 1
    ok. Thanks. Well that has cleared that up. Wherever it goes, it's not there. :) – Ian Warburton Dec 05 '17 at 17:36
  • How do you explain this... https://github.com/LouisBrunner/react-dnd-multi-backend/blob/master/src/examples/App.js. If you look at index.js (up a level), it uses the App in the render function, which has been wrapped by a `DragDropContext`? – Ian Warburton Dec 05 '17 at 19:56
  • 1
    @IanWarburton It is doing exactly what i have told you in answer. In index.js, `App` is a component wrapped by `DragDropContext`. Since it is component, and `render` want an element, it is being rendered as `ReactDOM.render(...`. Hope you got it. – Prakash Sharma Dec 05 '17 at 20:09
  • Oh, I get it. `App` is converted to an element by ``. I should have read your answer more carefully. Thanks. – Ian Warburton Dec 05 '17 at 20:15