Ggtcf

I have a tree structure with a root "Tree" component that has a list of root "TreeNodes", then TreeNodes can have an arbitrary number of children.

So inside of the TreeNode render method I have

 childrenHTML = this.state.children.map((child) => 
 return (<TreeNode nodeClick =this.props.nodeClick parentNode=this 
 key=child.childId node=child level=this.state.level+1 />);
 );

and

const isDragging, connectDragSource, connectDragPreview = this.props;

Then the final return for the render method looks like

return connectDragSource(
 <div>
 <div style=nodeStyle>
 connectDragPreview(
 <div className = "nodeContainer" + ' ' + this.state.nodeHover onMouseLeave=this.nodeUnHover onMouseOver=this.nodeHover onClick=()=>this.props.nodeClick(this)>
 <img alt = this.state.titleIcon className = "titleIcon" src = Connections.getImageURLByName(this.state.titleIcon) />
 <p className="nodeLabel"> this.state.nodeName</p>
 nodeLabelsHTML
 <DescriptiveIcons descriptiveIcons=this.state.icons />
 </div>
 )
 </div>
 childrenHTML
 </div>
);

I am exporting:

export default DragSource(DragTypes.STRUCTURE, treeNodeSource, collect)(TreeNode);

Then in the parent Tree file I am exporting

export default DragDropContext(HTML5Backend)(Tree)

and rendering the rootnodes like

 rootNodesHTML = rootNodes.map((node) => 
 return <TreeNode nodeClick=this.props.nodeClick key=node.childId node=node level=0/>
 );

...

return (
 <div className="treeContainer">
 <div className="wrapContainer">
 rootNodesHTML
 </div>
 </div>
);

This works great but only for the rootnodes, when I try to render the children (the childrenHTML variable is only populated after the parent is clicked on) I get the following error:TypeError: connectDragPreview is not a function

Leading me to believe that those react-dnd props that come from the "collect" function is not being passed to the rootnodes but not the children. It seems like it should to me because the same code should be executed for the parents as for the children as its the same class... really stuck here.

I am relatively new to react, and new to ideas like HOCs so all tips or suggestions are appreciated. Thank you!

I was able to get this working. Check out the example posted at the end of the thread in
https://github.com/react-dnd/react-dnd/issues/332.

Ultimately the solution was to wrap the TreeNode in a "DragContainer" with a very simple render method

render()
 const ...props = this.props;
 return <TreeNode ...props/>

Then in the TreeNode render method, when rendering the child nodes render a DragContainer instead, passing in all the usual props.

 childrenHTML = this.state.children.map((child) => 
 return <DragNodeContainer modalFunctions = this.props.modalFunctions nodeClick =this.props.nodeClick parentNode=this key=child.childId node=child level=this.state.level+1 />;
 );

I am still unsure as to the technical reason for this, however, the fix seems to work for other people and it works for me!