javascript - ReactJS high order components not forwarding property in a render loop -

i looking little guidance. have followed react drag-n-drop chess tutorial applying same principles project. got stuck when child class needs recursively repeat. when child rendered parent works. when recursively render child child render function errors missing default props should have been forwarded dragsource( ) according how high order components work. give console output of props below code.

in code below simplified version of trying do:

constants.js

export const itemtypes = {   child: 'child' } 

parent.jsx

import react, { proptypes } 'react' import child './child' import { dragdropcontext } 'react-dnd' import html5backend 'react-dnd/modules/backends/html5'  class parent extends react.component {   render () {     return (       <child />     )    } }  export default dragdropcontext(html5backend)(parent) 

child.jsx

import react, { proptypes } 'react' import { itemtypes } './constants' import { dragsource } 'react-dnd'  const tasksource = {   begindrag (props) {     return {       index: props.index     }   } }  function collect (connect, monitor) {   return {     connectdragsource: connect.dragsource(),     isdragging: monitor.isdragging()   } }  class child extends react.component {   static proptypes () {     return {       index: proptypes.number,       connectdragsource: proptypes.func.isrequired,       isdragging: proptypes.bool.isrequired     }   }    constructor(props) {     super(props)      console.log(props)      this.state = {       children: [1, 2, 3, 4]     }   }    render () {       const { connectdragsource, isdragging } = this.props        return connectdragsource(           <ul classname='children'>             { this.state.children.map((child, i) =>               <li key={child}>                 <child index={i} ref={'child/' + i} />               </li>             ) }           </ul>       )   } }  export default dragsource(itemtypes.child, tasksource, collect)(child) 

console.log output of child component props when called parent component render function

{   _id: "123"",   connectdragsource: fn(),   isdragging: false } 

console.log output of child component props when called recursively child component render function

{   _id: "1234"   index: 0 }  error: uncaught (in promise) typeerror: connectdragsource not function 

so think happening high order components not forwarding default props child component rendered child component loop.

i love advice may have have been digging few hours now. thanks.

so simple answer have learned. imported child in parent.jsx not same child in child.jsx. child class in parent has behavior of high order component while child reference has yet have high order component applied. around issue had in child.jsx:

render () {   const { connectdragsource, isdragging } = this.props    return connectdragsource(       <ul classname='children'>         { this.state.children.map((child, i) =>           <li key={child}>             <higherchild index={i} ref={'child/' + i} />           </li>         ) }       </ul>   ) }  const higherchild = dragsource(itemtypes.child, tasksource, collect)(child)  export default higherchild